[CSS] 생활코딩 CSS 간단 정리

CSS의 문법

<style>
    a {
    	color: red
        }
</style>

a 태그로 시작하는 것 모두 빨간색으로 바꿔줘!

 

HTML에 스타일 태그를 추가하는 것보다 CSS에서 관리하는 것이 유지보수 및 가독성 확보에 보다 효율적이며,

CSS 코드를 통해 디자인 관련 정보를 전달해줄 수 있다.

 

• a: 선택자 (selector) 
• color 부분을 Declaration이라고 하며, 선택자에게 지정될 효과를 적어준다. color는 property, red는 property value라고 한다.
• HTML에서는 이런 식으로 썼다. <li><a href="2.html" style="color:red">CSS</a></li> 

클래스와 ID

• 클래스 : 아래와 같이 코드가 있을 때 HTML, CSS 부분만 회색 폰트로 바꾸고 싶다. 각 태그에 위 볼드처리한 부분처럼 style을 넣어줘도 되지만 그럼 같은 내용을 2줄이나 써줘야 한다. 이럴 때 클래스를 사용해 별도로 묶어준다. 이처럼 클래스를 사용해 여러 개의 태그를 공동으로 제어할 수 있다. 클래스는 사용할 때 앞에 .을 붙여주어야 한다. 또한 클래스가 여러 개일 때는 가장 밑에, 가장 가까운 부분이 영향력이 더 세다.

a {
	color: black;
	text-declartion: none;
}

<li><a href="1.html"> HTML </a></li>
<li><a href="2.html"> CSS </a></li>
<li><a href="3.html"> JavaScript </a></li>

.saw {
            color:gray;
}

<li><a href="1.html" class="saw"> HTML </a></li>
<li><a href="2.html" class="saw"> CSS </a></li>

 

 

• ID : 특정 요소에 고유한 식별자를 부여할 때 사용한다. 만약 여러 요소에 같은 스타일을 적용해야 한다면 클래스 선택자를 사용하는 게 더 나을 수 있다. 그러나 특정 요소에만 스타일을 적용할 경우에는 ID도 널리 사용된다. 클래스 선택자와 ID 선택자를 같이 사용해 특정 클래스 안에 있는 특정 ID를 가진 요소에만 스타일을 적용시킬 수도 있다. 클래스는 사용할 때 앞에 #을 붙여주며, 한 페이지에 유일해야만 한다! 중복 되어서는 안된다.

<li><a href="2.html" class="saw active" id="active">CSS</a></li>

a {
	color: black;
	text-declartion: none;
}

#active {
	color: red;
	}


.saw {
            color:gray;
}

 

ID 선택자와 클래스 선택자가 있을 경우에는 무엇이 먼저 적용될까? 바로 ID 선택자가 적용된다.

ID 선택자 > 클래스 선택자 > 기본 태그 선택자 순으로 영향력이 강한데, 간단하게 더 좁은 범위를 선택할 수록 영향력이 높다.

 

위에서 말했던 것처럼 ID 선택자는 한 페이지에서 유일해야 한다.

그래서 정말 더 생길 일이 없을 경우, 딱 이 부분만 해당될 경우에 사용하는 것이 좋다. 

반면 클래스 선택자는 보다 유연하게 사용될 수 있는데, 대신 남용하면 파일의 용량이 커지고 요소를 찾는 속도가 느려질 수 있다.

CSS의 박스 모델

• block level element : h1처럼 화면 전체를 쓰는 블럭을 말한다.
• inline level element : a 태그처럼 해당 부분, 자기 자신의 부피만큼만 쓰는 태그를 말한다.
• display에서 위 부분은 조절 가능하며, none을 쓰면 display가 되지 않는다.

박스 모델은 HTML요소의 크기와 위치를 결정하는 모델로, 여러 영역으로 나눌 수 있다.

• content : 요소의 실제 내용으로 width, heigth 속성으로 크기를 조절할 수 있다.
• padding : 콘텐츠 바깥 영역이다.
• border : padding 영역 주위의 테두리 영역이다. 크기, 스타일, 색상을 설정할 수 있다.
• margin : 여백이라는 뜻으로 테두리 영역 주위의 여백 크기를 조절한다.

grid

HTML 요소를 행과 열로 구분 지어 그리드 형태로 배치하는 기술이다. 그리드를 만드는 부모 요소(그리드 컨테이너)와 그 안에 배치되는 자식 요소(그리드 아이템)으로 구성되어 있다.

#grid {
    border:5px solid pink;
    display:grid;
    grid-template-columns: 150px 1fr;
}
div {
    border:5px solid gray;
}

• grid-template-columns: 그리드 열의 너비를 설정한다.
• grid-template-rows: 그리드 행의 너비를 설정한다.
• grid-template-areas: 그리드  영역을 설정한다.
• grid-gap: 그리드 간격을 설정한다.

<div></div> 태그도 이 때 설명했는데, 디자인의 용도로만 쓰이는 태그로 블럭 레벨 엘리먼트로 화면 전체를 사용한다. 줄바꿈이 된다.

반면 <span></span> 태그는 같은 용도로 사용되지만 인라인 엘리먼트로 그 부분만 사용되며 줄바꿈이 되지 않는다.

 

미디어 쿼리

- 반응형 디자인이란 화면의 크기에 따라 웹 페이지의 각 요소들이 반응해 동작하는 것을 말하는데, 이걸 구현하는 핵심적인 개념이 미디어 쿼리다. 

- @media() 로 사용하며 [ @media(min-width:800px) → 최소 800 이상은 되어야 보인다. ]  이런 식으로 쓰인다.