본문 바로가기

👁‍🗨FRONT-END17

CSS에서 margin과 padding Margin과 Padding 차이 [날마다 3분 CSS] 글자와 상자 인라인 & 블록 HTML 요소가 화면에 출력되는 특성은 크게 2가지로 구분된다 인라인(Inline) 요소 : 글자를 만들기 위한 요소들. 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들. 인라인 요소 ( greenteafrog.tistory.com 위의 포스트를 통해 글자와 상자를 이해한 뒤 보면 이해하는데 도움이될 것이다. 설명하기전 브라우저의 개발자도구를 열어서 쉽게 볼 수 있는 HTML 박스모델을 보면서 이해하면 더 쉽다. 👁‍🗨한줄요약 각 HTML 요소간의 간격을 margin , 보더(요소의 테두리선)와 요소와의 간격을 padding 이라고 한다. 예를들어 네모박스(보더)안에 글자가 있는 박스 여러개가 가로로 줄.. 2022. 10. 26.

nav 태그 아무 생각없이 div와 span만 왕창쓰다가 nav태그는 대체 뭐하는데 쓰는거지 하면서 검색해보고 이걸 몰랐다는 나의 무지함과 안일함에 반성하며 짧지만 정리해놓는 HTML 일기다 . nav 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용합니다. 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있습니다. 글을 읽지 못하는 사용자를 위한 스크린 리더기와 같은 브라우저는 요소를 사용하여 해당 콘텐츠의 초기 렌더링을 생략할지 여부를 결정합니다. 보통 메뉴나 목차들을 자식요소로 담고 있기때문에 ul>li 태그와 함께 사용합니다. 여기에 css로 색칠하면 헤더가 완성이다. 📚출처 http://www.tcpschool.com/html-tags/nav 2022. 10. 25.

[날마다 3분 CSS] CSS 선택자 #가상클래스 선택자 시작 가상(Pseudo) 클래스는 클래스, 또는 태그명 선택자 뒤에 콜론(:) 을 붙여서 표시하는 특별한 요소의 상태, 또는 요소의 순서를 기준으로 자식 요소를 선택하는 방법을 기술한 것이다 또한, 가상 클래스 선택자는 실제로 Html에 존재하지 않는 클래스지만 마치 클래스를 놓은것 처럼 작동한다고 하여 가상 클래스 선택자라고 부른다. 자주 사용하는 가상 클래스 선택자의 종류 :hover 마우스의 포인트가 올라간 HTML요소에 대한 상태를 정의한다. p:hover, a:hover, .class:hover 과같이 선택자 뒤에 :hover을 붙여 사용한다. 아래 예시에서 a태그 요소에 마우스를 올리면 글자 색깔이 빨간색으로 바뀌게 된다. 💫예시 a:hover { color: red; } :active act.. 2022. 10. 19.

[날마다 3분 CSS] CSS 선택자 #복합 시작 아파트를 건설할때 골격을 세우고 인테리어 설계도를 통해 각 집의 호수마다 집의 디자인을 입히는 것 처럼 CSS 선택자란 HTML로부터 웹컨텐츠의 구조(골격)를 형성하고 시각적인 디자인과 레이아웃( 디자인 )을 표현하기위해서는 각 집의 호수, 한마디로 디자인 할 위치를 선택해주는 설계도가 있어야한다. 이때, 설계도가 CSS 선택자이다. 선택자의 종류 일치 선택자 일치 선택자(Basic Combinator)는 입력되어있는 CSS속성을 모두 동시에 만족하는 요소를 선택하여 CSS속성을 적용한다. 선택자가 span.red 인 경우에는 태그가 이면서 red라는 클래스를 가지고 있어야 적용이 됩니다. 정확히 명시할 때 사용합니다. 💫예시 span.red { color: red; } 자식 선택자 자식 선택자(C.. 2022. 10. 13.

이전 1 2 3 4 5 다음

티스토리툴바