과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍_김인원_3_CSS_210508
주제 : CSS
CSS
웹문서를 꾸미는 CSS
html이 웹문서의 구조를 세우고 정보를 입력하는 가장 기초적인 작업을 수행하는 언어라면 CSS는 웹문서의 디자인적 속성을 정의하는 언어라 이해된다. html과 유사한 기능을 가지는 부분도 존재하지만 서로의 차이점을 이해하는 과정이 필요하다.
CSS의 적용방법
- 직접 사용 : html의 태그에서 직접 CSS 속성을 입력하여 적용하는 방법
- head태그 : head태그에 해당하는 태그를 지정하여 속성을 입력하는 방법
- 외부연결 : link태그를 사용하여 html과 CSS 파일을 연결, 속성을 입력하는 방법
각 방법마다 장점과 단점이 있으나 실무를 수행하는 현장에서는 link태그를 사용한 외부연결방법을 쓴다고 강의에서는 이야기 한다. 지금 나의 수준은 걸음마 단계이지만 조금이나마 맛을 본 입장에서 확실히 외부연결 방법이 코드의 가독성이 높고 작업에도 수월함이 느껴진다.
CSS의 적용방법 : 직접입력
- 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 style="background-color: pink;">Hello World</h1>
- 출력
Hello World
h1 태그에 CSS의 style 태그로 배경색 '핑크' 속성을 주었다.
CSS의 적용방법 : head구역에 지정입력
- 코드
<html>
<head>
<meta charset="utf-8">
<style>h1 {color: red;}</style>
<title></title>
</head>
<body>
<h1>Hello World</h1>-출력
Hello World
head구역에서 style태그를 사용하여 h1태그에 'red'속성을 주었다.
CSS의 적용방법 : 외부연결(CSS문서의 연결)
- html 코드
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<h1>Hello World</h1>- CSS 코드
h1 {font-size: 80px;}h1 {font-size: 80px;
}
- 출력(현재 CSS파일이 제대로 적용되지 않음)
Hello World
html파일과 CSS파일을 연결하는 방식으로 다양한 선택자를 사용할 수 있고 Id/ class속성을 통하여 효율적인 작업이 가능하고 코드 자체의 가독성도 높일 수 있다.
- link태그를 사용하여 html과 CSS 파일을 연결한다.
CSS의 선택자
CSS는 선택자를 통하여 디자인을 적용할 대상을 지정할 수 있다. 태그를 직접 선택하는 것은 물론 ID/ Class속성을 사용하여 디자인이 적용될 객체를 분류하고 지정하여 효율적인 CSS작업이 가능하다.
<header>
<h1>header h1</h1>
<p>header p</p>
<a href="">naver</a>
</header>
<footer>
<h1>footer h1</h1>
<p>footer p</p>
</footer>header{color: red;}
- header구역에 'color: red'속성을 지정
h1{font-size: 40px:}
- h1태그에 'font-size: 40p'속성을 지정
header h1,
footer h1{color: blue;},를 사용하여 두개의 객체 모두를 선택하는 and로 CSS를 적용함
- heaer구역 h1과 footer구역 h1 모두에게 'color: blue' 속성을 부여
이러한 방식으로 각 객체 혹은 구역을 지정하여 CSS를 적용할 수 있다.
<h1>hello World</h1>
<h2 id="test1">Nice to meet you</h2>
<h3 class="test2">Welcome</h3>
<input type="text" placeholder="이름">
<input type="password" name="비밀번호">
태그 선택자
h1 {color: red;}
id 선택자
#test1 {color: blue;}
class 선택자
.test2{ color: green; }
atribute 선택자
input[type="text"]{border: solid 10px red;
}
input[type="password"]{border: solid 10px blue;
}
- 태그 선택자 : html태그를 직접 지정하는 것
- id 선택자: html태그의 id속성을 부여하여 CSS를 부여하는 것
- class 선택자 : html태그의 class속성을 부여하여 CSS를 부여하는 것
- attribute 선택자 : html태그와 그 속성값을 지정하여 CSS를 부여하는 것
id와 class의 차이점
id = 이름
id 선택자는 이름과 같이 고유한 값을 갖는다. 같문서 안에서는 똑같은 id값을 가질 수없다. #로 id선택자를 사용한다.
class = 별명
class는 별명과 같이 다양한 선택자들이 존재할 수 있다. 배경색, 폰트사이즈, 폰트 색상 등 개발자의 필요에 따라 다양한 class 선택자를 만들어 상요할 수 있다. .로 class 선택자를 사용한다.
태그의 위계와 CSS명령의 우선순위
같은 객체에 대하여 다수의 CSS명령이 있을 경우 정해진 순서에 따라 디자인 요소가 적용된다.
태그의 위계
<header>
<div>
<h2>header h2</h2>
<p>header p</p>
</div>
</header>html의 태그는 태그간의 위계를 가진다. 위 코드의 header는 하위의 div태그와 부모 - 자식의 관계를 가진다. 이런 위계관계는 CSS명령의 적용에서 보모 태그에 부여되는 디자인 요소가 자식 태그들 모두에게 적용되는 부모 - 자식 간의 유전적인 특성과 닮아있다.
CSS명령의 우선순위 (cascading)
CSS의 적용방법은 다양하게 존재하는 만큼 명령의 우선순위가 정해져 있다.
Style속성 > id > class > tag
의 순서로 우선적용된다 .
부모 - 자식 태그의 경우, 더욱 자세한 선택자 그러니깐 하위의 선택자를 지정할 수록 CSS명령이 우선 적용된다. 강의에서는 이런 cascading기능이 상당히 많은 곳에서 사용된다고 한다.
CSS의 다양한 속성
CSS는 웹문서에 디자인요소를 지정하는 언어인 만큼 그에 관련된 많은 속성이 있다. CSS의 cascading은 명령의 우선순위를 정리하는 것 뿐만 아니라 기존의 CSS코드를 제거하지 않고 새로운 디자인 요소를 덧입히는 용도로 사용할 수 있다.
주요 속성
width: 100px; = 객체의 넓비를 100px로 지정
width: 100%; = 객체 넓비의 100%로 지정
border: solid 10px red;
경계선의 타입, 굵기, 색상의 값을 입력한다.
Review
CSS를 제대로 활용하기 위해서는 태그와 속성들을 숙지하는 것은 물론 속성들의 값(색상값, 폰트 스타일값, 포지션값 등)까지 숙지가 필요할 것으로 예상된다. CSS의 기능을 적용하는 방법은 어렵지 않아 빨리 익힐 수 있겠지만 나머지 부분은 암기 혹은 숙지로 해결하는 것이 정답일듯 하다.
html/ CSS 나아가 앞으로 배울 javascript까지 주요 기능을 담당하는 태그, 속성 그리고 속성값까지 잘 정리된 자료를 찾아 초기 웹프로그래밍에 활용할 계획이다.
별개로 velog 작성에서 코드를 출력하는 부분에서 개선점이 필요할 듯하다. 다른 사람들의 velog작성 노하우를 찾아보고 시간이든 노력이든 어떤 부분에서도 효율적인 방법을 찾아야 겠다.
