웹 프론트 엔드 정리본 (19) 썸네일형 리스트형 화면 구성하기 : 폼(form) - 라벨(label) 오늘은 폼에서 쓰이는 라벨(label) 태그에 대해서 알아보겠습니다. 라벨(label) 태그란?라벨 태그는 ui요소에 텍스트를 결합할때 사용합니다.왜 굳이 라벨태그를 사용하는지를 물어본다면, label 태그는 다른 ui들과 결합해서 사용할 수 있기 때문입니다. label 태그의 속성forspan 태그나 p 태그를 사용하지 않는 이유는 label 태그의 for 속성 때문입니다. for 속성을 사용하여 같은 id 속성을 가진 ui에 상호작용을 할 수 있습니다.form여러개의 form에 동일한 id가 존재할때 사용합니다.form 속성값과 일치하는 id를 가진 form을 참조할 수 있습니다.form 과 for를 같이 사용하여 해당 id의 form 중 해당 id를 가진 ui에 상호작용 할 수 있습니다. .. 화면구성하기 : 폼(form) - checkbox와 radio group 이전 글에서는 input과 button에 대해 알아보았습니다.이번 글에서는 checkbox와 radio 타입에 대해 알아보겠습니다. 포괄적인 옵션을 선택할때, checkboxcheckbox는 하나의 틀에서 여러 옵션을 자유롭게 선택하고 싶을 때 사용합니다.보통은 사각 버튼의 ui로 나타내며,input 태그에서 type = checkbox를 사용하여 만들 수 있습니다. checkbox의 속성checked체크박스의 기본값이 체크되어 있기를 원할 경우 선택합니다. 속성만 추가하여 적용합니다.value텍스트에서 사용하는 것처럼 값을 지정해주지만, 사용방식은 조금 다릅니다. checkbox의 value checkbox를 체크한 뒤 submit을 수행하면 [name] = [value] 의 형태가 됩니다.만약 .. 화면 구성하기 : 폼(form) - input과 button 폼이란, html에서 입출력을 담당하는 dom요소를 통합해서 말하는것으로,css와 함께 사용하여 입출력 양식을 크게 바꿀 수 있습니다. 모든 입력을 담당하는 input 태그input 태그는 다양한 양식에 맞춰 입력을 할 수 있는 기능부터,type 속성을 이용해 체크박스나, 라디오박스, 버튼 등 다양하게 활용할 수 있는 태그입니다. input 태그에서 자주 쓰이는 속성nameinput 데이터를 식별하기 위한 키값을 설정하는데 사용합니다.name 속성이 없는 데이터는 전송되지 않습니다.value태그의 값을 지정할 때 사용합니다.placeholder입력값이 없을 때 나타내는 가이드입니다.typeinput 태그의 타입을 지정하는 데 사용합니다.text, password 등의 문자열 입력,number, ra.. 화면 구성하기 - 박스모델의 구조 저번까지 박스 컨테이너의 배치 방법에 대해 알아보았습니다.이번엔 박스 컨테이너의 내부 구조에 대해 알아보겠습니다. 박스모델의 구조f12 키를 누르고 박스 모델을 살펴보면 margin, border, padding, content, 네개의 구성으로 이루어진 것을 확인할 수 있습니다.margin : 박스 테두리 밖의 영역입니다.border : 박스 테두리입니다.padding: 박스 테두리와 실제 내용 사이의 공간입니다.content: 박스 모델 내부의 내용입니다. margin border padding content" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스일반적인 css에서 설정하는 width와 height의 값은 content + padding 까지의 영역입니다.만약.. 화면 구성하기 - grid 의 정렬 : content와 items flex와 같이, grid에도 각 행과 열을 정렬하는 속성이 존재합니다.오늘은 이를 알아보겠습니다. Grid의 content와 itemsgrid에서도 justify-content가 존재합니다.속성에 적용하는 값 또한 flex와 동일합니다.start, center, end 그리고 space-between, space-around, space-evenly 등이 존재합니다. 그렇다면, grid에서는 어떤 기준으로 정렬을 하는지 알아보겠습니다. 1 2 3 4 .. 화면구성하기 - grid template : rows,columns,areas 이전 글에는 grid 의 구성요소에 대해 알아보았습니다.이번 글에는 grid의 구성요소를 어떻게 설정하는지 알아보겠습니다. grid-template-rows, grid-template-columns두 속성은 grid의 row와 column의 개수, 그리고 각각의 길이 등을 설정하는데 사용합니다.각 칸마다 길이를 적어 나열하는 방식으로 간편하게 사용할 수 있습니다. 2×3 grid container를 만드는 css#grid-container{ display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;} 위 코드에서 fr 은 그리드 컨테이너의 여유 공간을 상대적으로 표현한 단위입니다.grid-templ.. 화면 구성하기 - grid 2차원 표현을 위한 layout, Gridgrid는 컨테이너의 방향을 지정하는 flex와 비슷하지만, 격자형식의 모델을 지원한다는 점에서 차이가 있습니다. display: gridgrid 모델은 행과 열을 기준으로 정렬하는 격자형 배치방법입니다.flex와 마찬가지로 부모가 되는 컨테이너, 자식이 되는 셀로, 셀 내부 아이템으로 구성되어있으며,축을 기준으로 하는 flex와 달리 행을 뜻하는 row, 열을 뜻하는 flex, 아이템 간 간격인 gutters로 구성되어있습니다. column row col 1 col 2 .. 화면 구성하기 - flex direction과 다양한 정렬방법 이전에는 flexbox 와 구성요소에 대해서 알아보았습니다.이제 그 구성요소들을 어떻게 다루는지에 대해 알아보도록 하겠습니다. 주축의 방향을 지정해주는 flex-directionflex-direction 속성은 주축의 방향을 지정해주는 옵션입니다.주 축을 가로로 설정하려면 row, 세로로 설정하려면 column으로 설정합니다. 예시 코드 default item1 item2 item3 row item1 item2 item3 co.. 이전 1 2 3 다음 목록 더보기
