step01. apply css
[외부 css]
@charset "utf-8"; /* 한글을 이상한 문자열로 인식하지 않도록 방지 */
/*
html 페이지에서 <style></style> 요소 안에 작성하는 문법과 같다
*/
p{
border: 1px solid red;
} <!-- 외부 css -->
<link rel="stylesheet" href="css/custom.css"/>
<style>
/* 내부 css */
p{
background-color: #00ff00;
}
</style>
</head>
<body>
<!-- 인라인 css -->
<p style="color:blue;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, consequuntur, consectetur doloribus qui ea perferendis alias. Dolorem aliquam optio mollitia commodi nostrum voluptas neque ut voluptatem enim aspernatur, aut eligendi.</p>
</body>css에는 세 종류가 있다.
- <style> 영역에 직접 작성하는 내부 css.
- 필요한 요소 안에서 style 속성을 이용하여 작성하는 incline css.
- 외부 파일을 가져오는 외부 css.
charset(character set)만 잘 설정해서 외부 파일에 따로 css를 작성한 후, 불러들이는 방식이다. 만약 한글을 이상한 문자로 인식하지 않도록 하기 위해서는 @charset을 'utf-8' 로 설정해준다.
어떤 차이가 있는가?
대부분은 내, 외부에 css를 작성한다. 하지만 javascript를 이용해서 css를 조작하려는 경우는 따로 incline css로 작성한다. 이전에도 javascript로 css를 변경한 적이 있다. 예를 들어
xxx.style.color="yyy";
xxx.style.backgroundColor="yyy";와 같이 말이다. 2021.12.08 - [뒷북 정리 (에이콘 아카데미)/javascript] - [javascript] step02. event
[javascript] step02. event
삭제 이전 수업의 마지막 예시이다. global 영역 (전역) : script가 실행되는 가장 바깥영역. local 영역 : 함수 등의 안쪽 영역. 만약 함수의 매개변수 first를 a라고 고친다면, 함수 안쪽에 있는 first는
gyuggling.tistory.com
step01. example
<style>
/*
p요소의
1. 배경색을 검정색으로
2. 글자의 색상을 흰색으로
3. 글자의 크기를 30px 로
4. margin 을 제거
해 보세요.
*/
p{
/* css 속성명은 이미 정해져있다. */
/* css 속성값은 정해진 카테고리 혹은 정해진 형식에서 원하는 값을 지정한다. */
background-color: #000000;
color: #ffffff;
font-size: 30px;
margin: 0;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, reiciendis. Magnam necessitatibus explicabo iure reiciendis dolorem quod illo excepturi maiores dignissimos fugit ad quaerat obcaecati, vitae, alias maxime? Ex, a.</p>
</body>css 작성법이다. 구성은 다음의 세 가지이다.
- selector (선택자)
- 중괄호 { }
- name: value
선택자는 내가 어떤 곳의 css를 바꾸고 싶은지 작성하는 곳이다. 요소가 될 수도 있고, id가 될 수도 있고, class가 될 수도 있다. 추후 다른 step에서 더 작성하도록 한다. 그리고 중괄호 안에는 어떤 css를 바꾸고 싶은지 작성하는 곳이다. 속성명과 속성값으로 구성되어 있으며, 이 두 가지 모두 이미 정해진 형태의 약속이 있다.
css는 web browser의 검사 항목의 style tab에서 테스트도 가능하다. 'user agent stylesheet' 는 기본 설정이라고 했다.
'뒷북 정리 (국비 교육) > css' 카테고리의 다른 글
| [css] step08. pseudo element (0) | 2021.12.13 |
|---|---|
| [css] step07. position (0) | 2021.12.13 |
| [css] step06. pseudo class (0) | 2021.12.13 |
| [css] step03~05. margin / padding / border (0) | 2021.12.13 |
| [css] step02. selector (선택자) (0) | 2021.12.13 |
댓글