1) 학습한 내용
CSS란?
Cascading Style Sheet의 약자로 문서에 색, 모양, 출력 위치등 외관을 꾸미는 언어다. 웹 문서의 내용과 상관없이 디자인만 변경 가능하며 다양한 기기에 맞게 탄력적으로 바뀌는 문서 작성 가능하다. CSS의 역할은 자동차로 치면 자동차의 외형을 정할 수가 있다는 점에 있다.CSS 작성법
h1 {
color: red;
font-size: 5em;
}위의 예시를 해석하면 h1이란 태그에 글자색과 글자 크기를 정하며 글자색을 빨간색으로 폰트 사이즈를 5em으로 정하는 걸 의미한다. 그리고, h1 뒤에 있는 중괄호({})는 그 안에 속성과 값 쌍의 형태를 취하는 하나의 선언이다.
CSS의 스타일 시트 구성
span(셀렉터) { color(프로퍼티): bluel(값); font-size(프로퍼티):20px(값); } /* span 태그 스타일 선언 */ (주석)CSS 스타일 시트 작성 및 적용 방법
인라인(inline) 방식을 통해서 html태그에 직접 style 속성을 넣어 작성하거나 내부적으로는 태그 사이에 작성하거나 외부적으로는 스타일 시트 파일을 별도 작성한 후 나 @import로 적용시킨다.CSS 규칙의 규칙
스타일 상속으로는 캐스케이딩(cascading)과 오버라이딩(overriding)이 있다.
자식 태그는 부모의 스타일을 상속 받는다.
부모 스타일 상속
상속이란?
상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. 단, 모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다.
자식 태그는 부모의 스타일을 상속 받는다.
CSS 규칙은 inline > id스타일 > class > tag 순으로 우선 적용을 시키며 부모 요소 스타일은 자식 요소로 전달된다.
우선 낮은 순위순으로 보면
브라우저 기본
p{color:black; font-size: 16px;}->
external.css
p {background: mistyrose;}->
style 태그
p{color:blue; font-size: 12px;}->
style 속성
<p style="font-size:25px">안녕하세요</p>순으로 적용된다.
셀렉터
| 셀렉터 종류 | |
|---|---|
| 태그 이름 셀렉터 | 전체 셀렉터 |
| class 셀렉터 | 속성셀렉터 |
| id 셀렉터 | 가상 클래스 셀렉터 |
| 셀렉터 조합 |
2) 학습내용 중 어려웠던 점
CSS는 자동차의 외형을 꾸미는 기능을 하는 언어다. html이후 다음으로 배우는 두번째 작성법으로 작성법을 익히면 html 다음으로 쉬운 언어다. 적어도 Javascript가 있는데 Javascript는 Java라는 이름과는 달리 C언어와 매우 비슷해서 C언어를 잘 알고 있다면, 적응하기가 쉽다.
3) 해결방법
그저 복습하는 것이 중요하다.
4) 학습소감
프론트엔드 과정을 지원한 내가 다시 CSS를 복습하게 되었다. 복습하고 포트폴리오를 만들 수가 있어야 제대로 배웠다고 할 수 있다.
