CSS content 속성? before, after 및 이미지와 줄바꿈 사용법

CSS content 속성 CSS content 속성은 title 속성처럼 속성값에 삽입된 텍스트나 이미지 등을 화면에 출력시킵니다. CSS 효과이기 때문에 의미론적 웹은 아니므로 검색엔진에는 검색되지 않는 디자인 요소로 취급됩니다. 본문코드 <h1> 태그에 안녕하세요! 라는 텍스트를 삽입시켰습니다. <html> <head> <style> h1 { content : “안녕하세요!”; } </style> </head> <body> <h1>Hello World!</h1> </body> </html> 결과 하지만 위 코드를 실행해보면 … READ MORE

CSS box-sizing? content-box vs border-box 차이점 정리

CSS box-sizing 속성 box-sizing 속성은 CSS의 테두리 영역의 크기를 결정합니다. box-sizing 속성값에는 content-box와 border-box가 있습니다. content-box : 지정한 CSS width 및 height를 컨텐츠 영역에만 적용합니다. border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있습니다. border-box : 지정한 CSS width 및 height를 전체 영역에 적용합니다. border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 … READ MORE

CSS :hover 효과? 마우스를 올린 태그를 선택!

CSS :hover 효과 : 링크 색 변화 CSS :hover는 마우스를 올린 태그나 속성 등을 선택합니다. 이렇게 : 콜론이 붙은 요소는 가상 클래스라고 부릅니다. 예를 들어 위키백과 등에서 링크에 마우스를 올렸을 때 텍스트 색이 변하는 효과는 :hover를 사용한 것입니다. <a> 태그에 :hover를 붙이면, <a>태그에 마우스를 올렸을 때에 CSS 효과를 지정할 수 있습니다. 마우스를 올리면, <a>태그의 글씨색이 붉은색으로 … READ MORE

CSS 형제 선택자? CSS의 + 및 ~ 기호 사용법 정리

CSS 형제 선택자는 어떤 의미일까요? + 기호인 인접 형제 선택자는 바로 뒤에 있는 요소 1개를 선택합니다. ~ 기호인 일반 형제 선택자는 뒤에 있는 모든 같은 요소를 동시에 선택자로 지정합니다.   CSS 인접 형제 선택자 : + A + B 인접 형제 선택자는 + 기호를 사용하며, A와 B가 같은 계층에 있을 때 A 바로 뒤에 B를 … READ MORE

CSS 하위 선택자 기능과 기호 그림과 함께 설명

CSS 하위 선택자 어떤 기능을 할까요? 자신의 태그에 소속된 하위 요소들을 선택자로 지정합니다. 자식 선택자에 비해서 선택 폭이 넓습니다. CSS 하위 선택자 기능 하위 선택자(자손 선택자)는 자신에 소속된 하위 태그를 선택자로 지정할 때 사용합니다. 자식 선택자는 1촌 이하의 자식 관계의 태그만 선택자로 지정할 수 있습니다. 하지만 하위 선택자는 2촌 이상 떨어진 손자 이상의 요소도 선택자로 … READ MORE

CSS > 의미 자식 선택자로 하위 태그 지정

CSS > 의미 무엇일까요? 하위 태그에 바로 소속된 태그를 선택하는 자식 선택자 기호입니다. CSS > 의미 CSS에서 > 기호는 자식 선택자를 의미합니다. 자식 선택자는 태그의 바로 밑에 위치하는 태그를 선택자로 지정하는 기능입니다. 예를 들어 <div> 태그 하위에 소속된 <p> 태그를 선택자로 지정하고 싶은 경우 div > p 형태로 두 태그 사이에 > 부등호 기호를 삽입하면 … READ MORE

li 태그와 a태그 사용시 링크 클릭 영역을 전체로 넓히는 방법

<li> 태그로 감싼 <a> 태그의 클릭영역을 늘리는 방법은 display 모드를 block 요소로 변경하는 것입니다. a 태그에 display:block 요소 삽입 <li> 태그 사이에 있는 <a> 태그의 글씨 클릭 가능 영역을 <li> 태그 전체 넓이로 늘리는 방법은 CSS에서 문제의 <a> 태그에 선택자를 지정한 후 display : block; 값을 삽입하면 됩니다. a { display: block; } 예제 ▷ … READ MORE

CSS 자식 선택자 또는 > 선택자 설명 예제

CSS 자식 선택자 기호는 부등호 > 를 사용합니다. 이 때의 자식의 의미는 마치 가계도의 부모 자식 간의 관계처럼 1촌의 관계를 말합니다. 두 요소 사이에 삽입해서 태그를 구체적으로 선택합니다. CSS 자식 선택자 CSS 자식 선택자(Child Selector)는 부모 요소 바로 밑에 존재하는 자식 요소를 선택하는 결합자입니다. 부모 요소와 자식 요소를 결합할 때에는 > 기호를 사용합니다. 부모 요소 … READ MORE

CSS 속성 선택자 의미 및 7가지 종류 예제

CSS 속성 선택자 의미는 HTML 태그에서 src, href, style과 같은 속성을 선택자로 지정할 수 있는 기능을 말합니다. = 기호를 중심으로 *, ~ 등의 특수문자를 조합해서 종류가 나눠집니다. CSS 속성 선택자 속성 선택자 (Attribute Selector)는 HTML 태그의 속성명과 속성값을 선택자로 지정할 수 있는 기능입니다. 속성 선택자에서는 [ ], ~=, *=, |=, ^=, $=  등의 기호를 사용합니다. … READ MORE

CSS 그룹 선택자 의미와 사용법 및 예제

CSS 그룹 선택자 기호는 쉼표 , 기호를 사용합니다. 의미는 여러 개의 복수 태그를 동시에 선택자로 지정할 때 사용합니다. 태그 전체는 * 기호를 사용하면 됩니다. CSS 그룹 선택자 그룹 선택자 (Group Selector)는 여러 선택자를 그룹으로 묶는 기능입니다. 보통 선언 블록의 명령문이 서로 같아서 중복될 때 코드를 줄이는 방법입니다. 예를 들어 아래와 같이 선언 블록의 명령문이 color: … READ MORE