본문 바로가기

👁‍🗨FRONT-END/🎨CSS10

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

[날마다 3분 CSS] CSS 선언 방식 - 내장/링크/인라인/@import 시작 CSS작성하고 HTML 문서에 포함시키는 방식은 크게 4가지 방식으로 이루어져 있습니다. 내장방식 인라인방식 링크방식 @import 방식 내장방식 HTML의 헤더 요소에 작성 하며.태그로 스타일을 작성하는 방식 이 방식은 대부분의 프로젝트에서 HTML, CSS, JS 파일을 나누어 관리하는 것이 일반적 이므로 자주 사용되지 않는 방식입니다. .. 인라인방식 요소의 style 속성에 직접 스타일을 하는 방식. ... ... CSS우선순위가 지나치게 높기때문에 공통기능에 대해서 CSS파일로 따로 관리하는 경우 인라인 방식으로 쓰여진 요소는 덮어쓰기가 불가능하며 변경이 불가능하기 때문에 유지보수에 어려움이 있다. ( 권장하지 않는 방식. ) 링크 방식 HTML의 헤더 요소에 작성 하며 태그로 CSS문서를.. 2022. 10. 10.

[날마다 3분 CSS] 글자와 상자 인라인 & 블록 HTML 요소가 화면에 출력되는 특성은 크게 2가지로 구분된다 인라인(Inline) 요소 : 글자를 만들기 위한 요소들. 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들. 인라인 요소 (inline) 💬특징 요소들이 수평으로 쌓임 ( 가로로 한줄로 ) 포함한 콘텐츠( content ) 크기만큼 자동으로 줄어듬 ( 상하좌우 ) 크기값 가질 수 없음 ( 사이즈 지정 불가능 width, height ) 상하 마진 적용 불가능 ( 좌우 마진은 가능 / 좌우 패딩도 가능, 패딩의 경우 상하는 넓어지게 보이는 것 뿐 적용x ) 인라인 태그는 하나의 글자라고 생각하면된다, 글자는 가로와 세로 사이즈를 가질 수 없기 때문에 style 태그를 통한 가로 높이는 먹지 않는다 또한 글자요소들.. 2022. 10. 7.

[날마다 3분 CSS] 가상요소 선택자 ::before ::after 가상 요소 선택자(가상 클래스 선택자) ::before, ::after 특징 가상 요소는 css를 통해서 가상의 element를 추가하는 코드이다. 이미 작성된 HTML에 새로운 스타일을 주기 위해서 가상 요소를 추가해서 사용을 할 수 있다. 내용의 앞( ::before )과 뒤( ::after )에 콘텐츠를 추가한다 content라는 속성이 없더라도 추가하고 봐야한다, 없으면 동작하지 않음 특정 요소의 앞(::before)이나 뒤(::after)에 지정한 내용(텍스트 또는 이미지)을 추가할 수 있다. 인라인 요소이다. ( = 넓이/높이 값이 지정되지 않는다 ) content 속성 normal: 아무것도 표시하지 않는 기본값 string: 문자열 생성 image: 이미지나 비디오를 불러올 수 있으나 크기.. 2022. 10. 6.

이전 1 2 3 다음

티스토리툴바