이 시간에는 CSS 언어를 사용할 때 핵심이 되는 속성들을 소개해보려고 한다.
1. 먼저 가장 중요한 속성은 class와 id
html을 CSS로 꾸며주기 위해 html의 태그 속성을 class와 id로 묶을 수 있다.
즉 class와 id는 HTML을 꾸며주기 위한 CSS의 속성이다.
class나 id로 속성 지정해주면 해당하는 그룹만 선택하여 디자인을 변경해줄수 있는 것이 특징이다.
또한 class와 id는 중복되어 사용할 수 있다. 예를들어 class로 성별로 묶은 후 id로 직급을 묶을 수 있다.
| HTML 예시태그 <ul> <li class="male" id="ceo">CEO곽철용</li> <li class="female>A양</li> </ui> |
상기와 같이 HTML코드에서 class와 id로 태그를 그룹핑 해준 후
CSS태그 부분(HMTL에서 직접 입력시 head부분에 <style>태그 안에 넣으면 CSS 언어로 표현 가능)에 아래와 같이
태그를 넣으면 class가 male 그룹의 경우 폰트 색이 회색으로 표현되고, id가 ceo인 사람은 폰트 색이 빨간색이 된다.
| .male{color:gray}; #ceo{color:red;} |
* .은 CSS에서 class를 나타내는 함축어다. 또한 #은 id를 나타내는 함축어이다.
*ceo{background-color: #dfe03l;} --> 요런식으로 글씨색을 지정하여 변경할 수도 있다.
*우선순위가 높은 순서는 ID > 클래스 > 태그다. class가 같고 id가 하나의 항목에만 적용되어 있으면 class보다 id의 속성이 우선하여 적용된다.
*클래스끼리 속성값이 중복되면 태그에 가장 마지막에 적은 클래스 속성값이 가장 우선순위가 높다.
2. 속성값(declaration) 더 알아보기
1) 폰트 바꾸기 예시
| body{font-family: "NanumGothic"} --> 나눔고딕체로 바뀜 |
2) 테이블 분류기호 없애기 예시
| ul{list-style: none;} |
3) 폰트 사이즈 바꾸기 예시
| h1{ font-size: 20pt; } |
4) 텍스트 정렬 바꾸기 예시
| h1{ font-size: 20pt; align-content: center; } |
5) box model 만들기
| h1{ border-width:5px; border-cor:red; border-style:solid; --> 밑줄 형태는 직선 display:inline; -- h1태그는 제목 태그이기 때문에 block level element지만, 이 속성을 통해 inline으로 변경 가능 } a{ border-width:5px; border-cor:red; border-style:solid; display:block; -->a태그는 inline element 지만 해당 속성을 통해 block level element로 변경 가능 } |
*block level element는 border라인 만든 단어가 짧더라도 한 줄의 가로 공간을 모두 사용함
*inline element는 딱 border라인을 만든 단어에만 border라인이 생성됨
*TIP: 태그가 화면에서 안보이게 하고싶으면 display:none 속성을 사용하면 해당 태그는 화면에서 보이지 않음
(잠깐!) border라인 적용 값에 대한 중복을 없애보자
개발을 잘하는 기준을 하나만 말하라면 중복된 코드를 없애고 심플하게 만드는 것이라고 들었다.
빨간색 위에 3줄의 코드를 1줄로 함축할 수 있다.
| h1, a{ border: 5px solid red; } |
*기타, box 모델의 속성들(값은 임의로 넣어봄)
(1) 박스 안 여백 주는 속성: padding:20px;
(2) 박스 간 간격 주는 속성: margin:20px;
(3) 박스 가로 길이: width:100px;
*팁: pading border margin의 관계가 궁금하다면 웹페이지에서 F12를 눌러 소스를 확인할 수 있다.
3. Grid 알아보기
아무 의미 없는 글자를 작성할 때 H1태그 사용보단 div태그를 사용한다. grid를 설명하기 위해 div 태그를 통해 설명해보도록 하겠다. grid는 우선 박스 모델의 영역을 스마트하게 지정해주는 태그다.
*div는 block level이라 inline을 사용하고 싶다면 span태그를 이용한다.
우선 grid를 사용하기 위해서 grid를 사용할 부분을 ID로 묶어줘야 한다.
| HTML 예시태그 <div id="grid"> <div>navigation</div> <div>article</div> </div> |
상기와 같이 html태그로 grid 영역을 지정해준 후 css태그로 아래와 같이 꾸며줄 수 있다.
| CSS 예시 태그 #gird{ border:5px solid pink; display:grid; grid-template-columns: 150px 1fr; } |
*grid-template-columns: 150px, 1fr은 display:grid;와 셋트 속성이다. 열에 대한 영역을 지정해주는 값으로 앞 열은 150px 고정이고 1fr은 이후의 영역은 다음 열이 가져간다는 뜻이다
예를들어 1fr, 1fr로 지정한다고 하면 --> 열이 서로 반반씩 같은 가로 영역을 가지게 된다. 또 2fr, 1fr로 지정하면 첫번째 열이 두번째 열보다 두배더 큰 영역을 가지게 된다.
(잠깐!)grid는 최신 css 언어이다. 새로운 태그를 사용할 때는 검토가 필요하다
그 태그가 사용할 가치가 있는지 판단하는 것은 아래의 통계 사이트를 참고하면 됨
https://caniuse.com/ -->브라우저들이 얼마나 해당 태그를 채택되고 있는지 보여주는 통계 사이트
통계 사이트를 확인해보니 90% 이상이 사용할 수 있는 언어라고 나온기 때문에 무리없이 사용해도 된다.
4. media quary(반응형 디자인)
미디어쿼리는 @media속성을 통해 조건을 걸어 해당 값에 해당하는 경우 각각 변화하는 모습의 디자인을 만들 수 있다.
예를들어 화면의 크기가 최소 800px일 때 보여지는 값 만든다고 하면 CSS는 아래와 같다.
| CSS 예시 태그 @media(min-width:800px) { div{ display:none; } } |
* 가로 길이가 800px 이하가 되면 div의 값이 보이지 않게됨
* max-width:800px로 하면 800 이상이 되면 보이지 않는 것임
*업데이트 버전1: 2022-09-18