이번에는 CSS에 대해 자유롭게 정리 해보는 포스팅입니다.
동시에, 인기가 많은 Bootstrap도 정리해볼 것입니다.
CSS는 HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술로 잘 설계된 css 는 재활용이 가능하며 나아가 테마, 템플릿의 형태로 확장할 수 있습니다.
부트스트랩은 부트 스트랩은 트위터에서 개발한 UI 라이브러리 입니다.
목적
- 모바일 환경에 적합한 반응형 웹을 개발하기 위한 라이브러리
- 디자인으로 인한 개발시간을 단축하기 위한 개발도구
그렇다면, CSS를 사용하는 이유가 뭘까요?
1.관리에 유용합니다. HTML에서 스타일 관련 부분만 담아놓은것이 CSS이기에 관리에 용이.
2.재사용성을 높힐수 있습니다. 스타일 서식을 공유해서 여러 웹페이지 디자인에 재사용, 통일할 수 있습니다.
3.HTML문서 자체 무거움을 줄일수있습니다.
즉 편의성을 높히려고 사용합니다!
선택자 : 스타일을 적용하고자 하는 html 요소를 선택하는 역할입니다.
지정할 스타일 속성명에 해당합니다. 속성 : 값; 이 한단위이고 ;로 구분합니다.
값 : 키워드(block)나 특정 단위(픽셀 퍼센트)를 이용하여 원하는 스타일을 적용. 속성과 쌍을 이뤄 사용합니다.
P자 뒤에 중괄호 안에 한 블록을 선언블록입니다.
내부 속성과 값의 한쌍은 선언! 세미콜론을 통해 구분. 선언이 끝났다!
세미콜론으로 한줄로 표현도 가능하다.(권장하지않는 방법.)
HTML에 CSS를 적용하는 방법
HTML은 단독적 사용이 가능하지만, CSS는 단독으로 사용이 불가능합니다. 이는 빈종이에 스타일을 적용할수 없는것과 같습니다. 반드시 HTML에 적용을 시켜야 쓸 수 있습니다.
적용 방법 으로는
Link style
Embedding style
Inline style
이 있습니다.
먼저 Link style입니다. 링크스타일은 가장 일반적인방법으로, 가장많이 사용합니다.
링크 스타일은 쉽게말해 HTML에 외부에 있는 CSS파일을 불러오는 것입니다. 그 방법은 head태그사이 link태그 추가하는 방법입니다. 여기서 href은 hypertext reference의 줄임말이고 하이퍼텍스트가 참조하고 있는 것이 어떤 것이다 ~ 나타내는 것입니다.
헤드 부분 사이에 href 로 css파일이 연결되어있음을 확인할 수 있습니다.
Embedding style입니다. HTML의 <head>사이에 <style>를 이용해 CSS 작성합니다.
해드테그 사이에 스타일태그로 파랑색을 입힌것을 확인할 수있습니다.
이 결과 역시 위와 같이 나오는 것을 알 수 있습니다.
Inline style입니다.
HTML의 요소에 직접 style속성을 이용해 CSS작성합니다.
선택자 기초
앞서 나왔듯이 h1, p, span, div, a 등등의 태그들이 있다.
여러 개의 선택자를 ,를 이용하여 스타일을 한번에 지정가능합니다.
먼저 단순선택자입니다.
단순 선택자는 타입 클래스 아이디 전체 속성 종류로 나뉩니다.
타입 선택자.
해당 태그를 가지는 모든 요소에 스타일을 적용합니다.
아이디 선택자.
아이디 선택자는 해당 id로 스타일을 적용합니다.
ID는 신분증과 같습니다. 나의 신분증은 나밖에 가질 수 없는것과 같다는 말입니다.
이처럼 HTML에서도 같습니다. 동일한 아이디는 존재할 수 없습니다 즉 아이디로써 다른요소와 구분되는 점을 만들어줍니다.
#과 대괄호 사용해 스타일을 적용합니다.
클래스 선택자입니다. 클래스이름으로 스타일을 적용합니다
클래스는 아이디와 마찬가지로 HTML 속성입니다. 클래스는 비슷한 특징을 갖는 요소를 지정하여 묶을 수 있고 여러 번 사용이 가능합니다. 온점을 사용하여 스타일을 적용합니다.
전체 선택자입니다. *을 사용해 모든요소에 스타일을 적용합니다.
단 이는, 모든요소에 적용하기 때문에 속도 저하 가능성이 있기에 권장되지 않습니다.
속성 선택자입니다. 특정 속성을 소유하는 모든 요소에 스타일을 적용합니다.
여기서 하나 궁금증이 생기실수도 있는데 물론 저만 생긴거일수도 있는데, 이 a는 무엇이냐. 사실 a 라는 태그가 href 라는 속성을 쥐고 있는 녀석입니다. 즉 a 태그에 속해있는 속성중에 하나가 href 인것입니다 쉽게말해 href 는 a태그의 부하들 중 하나였던 겁니다.그외 a태그의 부하들로는 target, title 등이 있습니다.
복합선택자입니다.
복합선택자는 앞내용보다 복잡할수있으니 천천히 배워보겠습니다.
Section안에 article안에 있는 요소를 자식요소 즉 하위요소입니다.
Article을 본인이라 가정한다면 노랑색 div와 p가 자식,녹색 p까지 포함한것이 후손입니다.
여기에서 자식선택자는 선택자 A의 모든 자식중 선택자 B에 일치하는 요소를 선택하는 선택자입니다.
즉 위의그림에서 아티클의 자식중 p 만 선택하고있습니다.
사용법은 선택자a > 선택자 b {내용;}입니다.
여기에서 후손선택자는 선택자 A의 모든 후손중 선택자 B에 일치하는 요소를 선택하는 선택자입니다.
즉 위의그림에서 아티클의 후손들 중 모든 p 를 선택하고있습니다.
사용법은 선택자a 선택자b {내용;}입니다.
아래는 실습 코드입니다.
'개발 > Web Front-End' 카테고리의 다른 글
| [Web Fe] CSS 정리하기 3 (0) | 2021.06.19 |
|---|---|
| [Web Fe] CSS정리하기 2 (0) | 2021.06.18 |
| [Web Fe] 콘텐츠모델, 시멘틱마크업, 블록 & 인라인 (0) | 2021.06.17 |
| [Web Fe] HTML 태그 (0) | 2021.06.16 |
| [Web Fe] HTML 이해하기. (0) | 2021.06.16 |
