지금, 개발하기/CSS29 HTML/CSS] before, after 가상요소 가상 요소(Virtual element)는 HTML 문서 트리(DOM)에는 실제로 존재하지 않지만 CSS를 사용하여 스타일을 적용할 수 있는 요소를 의미합니다. 가상요소를 사용하면 HTML문서에 존재하지 않는 요소를 CSS를 통해 생성하고 스타일을 적용할 수 있습니다. 다시 말해서, HTML 태그나 javascript없이 CSS만으로도 HTML 문서 안에 디자인 요소를 추가할 수 있다는 것이죠. 가상 요소에는 대표적으로 ::before와 ::after가 있습니다. ::before는 선택한 요소의 시작 부분(앞)에 가상 요소를 생성하고, ::after는 선택한 요소의 끝 부분(뒤)에 가상 요소를 생성합니다. 아래의 간단한 예시를 보면 "Hello, World" 앞에 before 가상요소(👋)가 뒤에 aft.. 2023. 8. 8. HTML/CSS] label 태그는 언제 쓰는 건가요? 1. label 태그란? 태그는 폼 요소에 이름표를 붙이기 위한 것입니다:) 이 이름표를 레이블이라고 하는데요. 쉽게 말하면 인풋 입력 창 앞에 있는 텍스트를 생각하시면 됩니다. 아래 그림에서는 '이름', '나이'가 되겠네요. 태그를 사용하다보면 태그를 쓸 일이 많은데요, 아주 쉬우니 간단하게 보겠습니다. 예시를 볼까요? css html 아래 사진처럼 label을 사용하지 않았을 때는 input태그를 정확히 클릭해줘야만 입력이 가능합니다. 1) 이번엔 이름, 나이 input태그에 태그를 적용시켜보겠습니다. 짜짠~ 이름표만 클릭해도 input태그에 입력이 가능합니다. 2) 이번엔 체크박스에 태그를 적용시켜보겠습니다. 짜잔~ 역시나 이름표를 클릭하기만해도 체크박스 선택/해제가 가능하네요 이름: 나이: css.. 2021. 10. 5. HTML/CSS] flex- box로 요소 배치하기2 지난 시간에 이어서 '플렉스 박스 레이아웃'입니다. '플렉스 박스 레이아웃'을 사용할 때 유용한 추가 속성들을 살펴 보겠습니다. 먼저 지난시간에 하던 예시를 이어서 보여드리겠습니다 :) .container{ width: 800px; height: 400px; border: 5px solid black; background-color: burlywood; /* flex-box로 만들어주기 */ display: flex; /* 주축방향 정렬 */ justify-content: center; /* 교차축방향 정렬*/ align-items: center; } .item{ width: 100px; height: 100px; border: 5px solid black; background-color: chocola.. 2021. 8. 22. HTML/CSS] flex- box로 요소 배치하기 CSS로 원하는 형태의 레이아웃을 만드는 건 생각보다 쉽지 않습니다. Position, Float, Table 등을 이용해서 레이아웃을 하면 복잡하고 시간도 많이 걸립니다. 이걸 도와주는 친구가 바로 '플렉스 박스 레이아웃'입니다. '플렉스 박스 레이아웃'을 사용하면 박스 높이를 동일하게 맞추거나 아이템의 사이즈에 상관없이 동일한 간격으로 배치하는 일 등이 쉬워집니다. 1. Flex -box는 'container'와 'item'으로 이루어져 있습니다. 'container'와 'item'에는 들어가는 속성들도 아래처럼 다른데요 ㅎㅎ 오늘은 몇가지만 살펴보겠습니다. contariner속성에는 display, flex-flow, justify-content, align-content, align-item 등이.. 2021. 8. 21. 이전 1 2 3 4 ··· 8 다음
