CSS 기초

CSS 기초

<p style="color:red">CSS</p>

CSS를 사용하면 HTML을 이용해서 웹 페이지를 디자인 하는 것이 더 쉬워졌다.

그리고 HTML에서 CSS 코드를 분리할 수 있다. 또한 HTML 보다 CSS를 통해서 스타일을 만들기가 더 간편하다.

 

a 태그의 color를 일괄적으로 변경

a {
	color:black;
	text-decoration: none;
	text-align: center;
	font-size: 45px;
}

• a 태그는 선택자이다.
• color:black =>선언, Declaration
• color는 속성, property
• red는 value
• 다른 선언과는 세미콜론(;) 으로 구분

 

HTML안에 CSS를 사용하는 방법은 html내 style 태그를 쓰면 된다.

<p style="color:red">CSS</p>

 

CSS의 중요 요소

효과, 선택자

 

 

선택자 우선 순위

구체적인 것을 우선 순위를 높였다.

id 선택자 > 클래스 선택자 > 태그 선택자

 

 

 

박스모델

* Block level element => 화면 전체 크기를 사용

- display:inline 으로 변환 가능

 

* inline element => content 크기 만큼 사용

- display:block 으로 변환 가능

 

h1, a {
	/* 중복 제거 */
	border: 5px solid red;
    
    /* 테두리와 컨텐츠 사이의 여백 */
    padding: 20px;
    
    /* 테두리와 테두리 사이의 간격 */
    margin: 20px;
    
    /* 박스의 크기를 조절 */
    width: 100px
}

 

그리드 모델

- 그리드 형태로 배치

- div를 감싸는 부모 div 태그를 생성

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

div {
	border: 5px solid gray;
}

 

 

아래 사이트에서 해당 CSS 사용 가능 브라우져 확인 가능

- https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

 

참고

인프런: 생활코딩의-web2시리즈