라벨이 CSS인 게시물 표시

[CSS] CSS 선택자(selector)

CSS 적용은 아래 링크 참고. https://moongstory.blogspot.com/2021/06/css.html <style> // 모든 항목에 적용 됨. * { } // 모든 <p> 태그에 적용 됨. p { } // <태그 class="class_name"> 동일한 클래스를 가지는 모든 태그에 적용 됨. .class_name { } // <h3> 태그 중 <h3 class="class_name"> 인 태그에만 적용 됨. h3.class_name { } // <ul id="ID_name"> 처럼 id로 ID_name을 가지는 태그에 적용 됨. #ID_name { } // <section> 태그 하위의 모든 <p> 태그에 적용 됨. section p { } // id로 container를 가지는 태그 하위의 모든 <ul> 태그에 적용 됨. #container ul { } // <section> 태그 하위의 첫번째 <p> 태그(자식 태그)에 적용 됨. section > p { } // id로 container를 가지는 태그 하위의 첫번째 <ul> 태그(자식 태그)에 적용 됨. #container > ul { } // 동일 레벨에 위치하는 <h1> 태그 다음에 나오는 첫번째 <p> 태그에만 적용 됨. h1 + p { } // 동일 레벨에 위치하는 id로 container를 가지는 태그 다음에 나오는 첫번째 <ul> 태그에만 적용 됨. #container + ul { } // <h1> 태그 다음에 오는 모든 형제 <p> 태그에 적용 됨. h1~p { } // <a> 태그와 <p> 태그 모두에 적용 됨. ...

[CSS] 외부 CSS 링크하기

<!DOCTYPE html> <html lang="ko-KR"> <head> <meta charset="utf-8"> <title>타이틀</title> <!-- 별도의 css 파일로 만들어서 아래와 같이 링크. --> <link href="style.css" rel="stylesheet" type="text/css"></link> <!-- 또는 아래와 같이 <head> 태그 사이에 삽입. --> <style></style> </head> <body> <header> </header> <section> <article> </article> </section> <footer> </footer> </body> </html>

[CSS] 일부만 CSS 적용

아래와 같이 <span> 태그 사용 <!DOCTYPE html> <html lang="ko-KR"> <head> <meta charset="utf-8"> <title>타이틀</title> <style> .accent { font-size: 50px; } </style> </head> <body> <header> </header> <section> <article> <h2>샘플</h2> <h3>샘플 텍스트 <span class="accent">스타일 일부 적용</span> 예제</h3> <p> p 태그 내부의 샘플 텍스트 </p> </article> </section> <footer> </footer> </body> </html>

[CSS] 속성

https://developer.mozilla.org/ko/docs/Web/CSS/Reference#%ED%82%A4%EC%9B%8C%EB%93%9C_%EC%83%89%EC%9D%B8