Option 태그와 input 태그의 사용 만약 사는 지역과 성별, 먹고 싶은 음식을 고를 페이지를 만들어보자면 사는 지역에는 각 도시들의 이름이 있어야 하고, 남, 여 중에 한 개만 선택되어야 하며 먹고 싶은 음식은 여러 개 선택해도 돼야 할 것이다. 사는지역: 선택해주세요 인천 서울 제주 select name에 city를 입력하게되면 city값에 유저가 선택하는 값이 저장된다. 물론 form태그를 써야한다. 이름이 city이고 , id는 선택된 값이 들어간다. 기본은 선택해 주세요 이고 선택한다면 인천 , 서울 , 제주 목록이 나온다. 성별: 남: 여: br은 줄 바꿈이다. 가짓수 중에 한 가지만 선택할 수 있다면 radio를 사용할 수 있다. 하지만 주의점이 만약 name이 다르다면 동시에 선택되기..
만약 이메일과 비밀번호를 로그인하는 창을 만들려고 한다면 head 문구에는 부트스트랩에서 css와 js파일을 걸어놓았다. email password 사용자로부터 입력을 받아서 어딘가(서버)로 보낼 때 사용한다 action : 목적지(보통 서버에서 처리할 주소를 작성한다. method : 전송방식을 지정한다. get : 입력값이 주소창에 노출된다. ( 기본 ) post : 입력값이 노출되지 않는다. mt는 margin top이며 , me , ms , mb 등이 사용될 수 있다. 태그는 입력을 받는 태그이다. 종료태그는 사용하지 않는다. label에 대해서 label은 폼의 양식에 이름 붙이는 태그이다. 주요 속성은 for이며 label의 for의 값과 양식의 id의 값이 같으면 연결된다. label을 클릭..
기본적으로 bootstrap에서 양식을 가져와서 쓸 수 있다. https://getbootstrap.kr/ Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr Bootstrap의 컴파일된 CSS 또는 JS만 필요하다면 CDN 링크를 가져와서 붙여 쓸 수 있다. 로그인 Click 비밀번호 Click 스타일에 버튼 태그는 기본적으로 블루 배경에 테두리는 없음 , 커서를 대면 마우스포인터 모양이 바뀌게 , 글색은 흰색이다. border-radius로 모서리를 라운딩지게 할 수 있다. 본문의 btn btn-primar..
1. 기본 그리드 div1 div2 div3 div4 div5 div6 div7 div8 만약 그리드를 적용하려면 그 상위 부모에 그리드를 적용해야 한다. 본문에서는 item 클래스가 container에 속해있기 때문에 container에 display를 grid로 지정했다. grid-template-columns에 auto auto auto auto를 줬는데 한 줄에 몇 개를 표현할지 설정하는 것이다. 본문에서는 4개씩 나오게 된다. 2. 응용 1 div1 div2 div3 div4 div5 div6 div7 div8 grid-column-start , end와 grid-row-start , end로 각 그리드의 객체를 늘릴 수 있다. 각 숫자의 자리가 이렇다고 볼 수 있다. 그렇다면 본문처럼 div1..
각 홈페이지마다 가로범위를 줄이면 다르게 표현되는 홈페이지들이 있다. 이런 홈페이지들이 MediaQuery를 썼다고 할 수 있는데 한 상자를 만들어서 색은 토마토색 , 200 x 200 으로 만들었다. @media (max-width: 900px) { .container { background-color: dodgerblue; width: 100px; height: 100px; } } @media (max-width: 700px) { .container { background-color: violet; width: 300px; height: 300px; } } 만약 브라우저 크기가 900px 아래라면 , 색을 블루로 바꾸고 크기를 100 x 100으로 바꾸어지게 된다. 또 , 700px 아래라면, 색을 ..
1. Float로 Layout 지정하기 1 - 1 코드 - body 간단하게 이런 형식의 layout을 지정하고 싶을 때, Home 저는요 Portfolio Contact Me header 영역 nav 영역 section 영역 footer 영역 div 태그의 속성을 menu로 지정하고 리스트 태그를 이용해 메뉴를 만들었다. 각 항목마다 누르면 링크므로 반응하지만 href가 #이기 때문에 이동하지는 않는다. 다른 div 태그의 속성은 container로, 그 안에는 div 태그의 속성 header , main , footer가 있고 main 안에 div 태그의 속성 nav , section이 존재한다. 1 - 2 Style ul { list-style-type: none; overflow: hidden; ..
Float란? float란 이름의 속성이 있는데 기존의 출력정책을 깨고 혼자 자신의 위치에서 벗어나서 현재 라인의 좌측(우측) 끝으로 이동한다. Float In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas..
1. Position이란? 말 그대로 요소를 배치할 때 사용하는 속성이다. 좌표값을 사용한다 X(Left), Y(top) 좌표 좌표를 지정하는 방식이 여러 개 제공된다 ( 좌표계 > 기준점 ) 2. Position의 종류 2 - 1 . Position - static 정적좌표이며 기본값이다 ( 디폴트값 ) FlowLayout 방식이다. 워드프로세서 방식이다 코딩 순서대로 출력된다 ( 위 > 아래, 왼쪽 > 오른쪽 ) 좌표값이 지원 안된다 ( Left , Top 사용 불가능하다) 2 - 2 . Position - absolute 절대 좌표이다 기준점은 문서의 좌측 상단 모든 태그가 동일하게 문서의 좌측 상단을 원점으로 한다 원래 있던 공간이 유지되지 않는다. 기준점(원점)은 자신의 부모에 가장 최근 pos..
1. padding , margin 기본적으로 여백을 남기는 것이다. padding 은 안쪽 여백, margin은 바깥쪽 여백이다. 위, 아래, 좌, 우 여백을 각각 지정하거나 한 번에 지정할 수 있다. 1. 지정방식 4방향을 한번에 적용 : 값 하나만 작성 ( margin: 10px; ) 위아래, 좌우를 각각 적용 : 값 2개 작성 ( margin: 10px 20px; ) 위, 좌우, 아래를 각각 적용: 값 3개 작성 ( margin: 10px 20px 30px; ) 4방향을 각각 적용: 값 4개 작성 ( margin: 10px 20px 30px 40px; ) margin-top, margin-bottom처럼 처음부터 따로 지정할 수 있는 속성도 있다. 즉 , 시계방향 ( 상우하좌 ) 순서다. 2. 예..
1. table 코드로 작성하다 보면 표를 만들어야 할 때 html에서는 , , 태그를 적절히 사용해 표를 제작할 수 있다. 2. 표 삽입하는 방법 2- 1 각 태그의 설명 태그 설명 표(테이블)의 시작과 끝을 의미한다 표(테이블)의 행을 의미한다 표(테이블)의 열을 의미한다 표(테이블의 제목을 의미하며 가운데 정렬과 굵게 효과가 기본적으로 제공된다 먼저 로 코드를 작성하고 블록 내부에 , 태그를 사용해 열을 만든다. 즉 , 블록 내부에는 , 가 있고 내부에 가 있는 것이다. 표의 내용은 태그 안에 놓아둔다. 2 - 2 사용법 1행 1열입니다 1행 2열입니다 1행 3열입니다 테두리의 기본값이 테두리 없음이기 때문에 테두리가 없다. 스타일로 재지정해줘야 하는데 td 테두리에 border로 1px 테두리를 ..
