본문 바로가기

HTML13

HTML/CSS] label 태그는 언제 쓰는 건가요? 1. label 태그란? 태그는 폼 요소에 이름표를 붙이기 위한 것입니다:) 이 이름표를 레이블이라고 하는데요. 쉽게 말하면 인풋 입력 창 앞에 있는 텍스트를 생각하시면 됩니다. 아래 그림에서는 '이름', '나이'가 되겠네요. 태그를 사용하다보면 태그를 쓸 일이 많은데요, 아주 쉬우니 간단하게 보겠습니다. 예시를 볼까요? css html 아래 사진처럼 label을 사용하지 않았을 때는 input태그를 정확히 클릭해줘야만 입력이 가능합니다. 1) 이번엔 이름, 나이 input태그에 태그를 적용시켜보겠습니다. 짜짠~ 이름표만 클릭해도 input태그에 입력이 가능합니다. 2) 이번엔 체크박스에 태그를 적용시켜보겠습니다. 짜잔~ 역시나 이름표를 클릭하기만해도 체크박스 선택/해제가 가능하네요 이름: 나이: css.. 2021. 10. 5.
HTML/CSS] 폰트 설정 폰트를 설정하는 방법을 알아보도록 하겠습니다. CSS 폰트에는 크게 family-font와 generic-font가 있습니다. 이 두가지를 잘 활용하면 누구나 폰트를 쉽게 사용할 수 있습니다. 1. family-font와 generic-font 1) family-font: 우리가 일반적으로 알고 있는 특정 글꼴 ex) Georgia, arial, 나눔고딕, 궁서, 굴림, Times New Roman, Times, 등 2) generic-font: 비슷한 모양의 글꼴 집합 family-name으로 지정된 글꼴을 사용할 수 없는 경우 브라우저가 비슷한 스타일로 대체 할 수있도록 선언해주는 폰트입니다. ex) serif, sans-serif, monospace, cursive, fantasy - serif :.. 2021. 5. 31.
HTML/CSS] CSS 우선순위는어떻게 정해지나요? 2탄 지난 시간에 이어서 CSS 우선순위 규칙에 대해서 알아보도록 하겠습니다. CSS 스타일이 여러개 적용된 경우 어떻게 우선 순위를 정해야하는지 이어서 살펴 보도록 하겠습니다. CSS의 우선순의를 결정하는 세가지 요소 2) 명시도 스타일이 여러개가 적용되면 당연히 충돌이 일어나겠죠? 그런데 그럼에도 불구하고 웹페이지는 에러를 쏟아내지 않습니다. 알아서 스타일의 우선순위에 따라 스타일을 적용했기때문입니다. 이번에는 스타일 적용 범위에 따라 우선순위를 정하는 '명시도'에 대해 알아보겠습니다. 명시도를 적용하면 범위가 작으면 작을 수록 우선 순위가 높아집니다. 인라인 스타일 > id 스타일 > 클래스 스타일 > 태그 스타일 예를 들어 id 선택자는 클래스 선택자나 태그 선택자보다도 명시도가 높습니다. 인라인 스타.. 2021. 5. 28.
HTML/CSS] CSS에도 상속이 있나요? 상속이란 부모(상위)요소에 적용된 값을 자식(하위)요소가 물려받는 것을 의미합니다. 상속이라는 개념이 없다면, 우리는 부모 밑에 딸린 자식들에게도 같은 매번 속성을 적용해야하는 번거로운 작업을 해야했을 겁니다. 그런데 '상속' 덕분에 우리는 부모에게만 속성을 적용하기만 하면되는 편리함을 누릴 수 있습니다. 예시를 통해서 '상속'을 쉽게 알아볼까요? 아래 예시에서 우리는 태그와 태그, 태그에 한번에 모두 같은 색을 적용할 수 있습니다. 그 이유는 이 태그들이 모두 content 클래스의 자식들이기 때문입니다. 부모인 content 클래스에 색상을 변경해 보겠습니다. 사이트 이동하기 내가 가고 싶은 사이트는 구글! 고고~! Here .content { color: olive; } 상속 덕분에 부모인 태그에만.. 2021. 5. 25.

티스토리툴바