본 게시글은 인프런 강의 "CSS 기본부터 활용까지"를 보고 공부한 내용을 정리하고 있습니다.
[무료] CSS 기본부터 활용까지 - 인프런 | 강의
CSS는 HTML을 아름답게 꾸며주는 디자이너의 언어입니다. CSS는 디지털 컨텐츠를 생산하는 사람들에게는 붓 질과 같은 것이 아닐까 싶습니다. 이 수업에서는 디지털 붓 질을 하는 법을 알려드립니
www.inflearn.com
개발환경
환경은 편리한 인텔리제이로 하려고 한다.
생활코딩 자바스크립트 기본 - 도구의 선택 (인텔리제이로 javascript)
본 게시글은 인프런 강의 "생활코딩 - 자바스크립트(JavaScript) 기본"를 보고 공부한 내용을 정리하고 있습니다. https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8..
leewang31.tistory.com
이전에 포스팅한 인텔리제이에서 환경구축 방식으로 HTML을 만들어서 공부하려고 한다.
HTML과 CSS가 만나는 방법
우선 코드를 보자.
<!DOCTYPE html>
<html>
<head>
<style>
h2{color:blue}
</style>
</head>
<body>
<h1 style="color:red">Hello World</h1>
<h2>Hello world</h2>
</body>
</html>이전에 HTML에서 공부했던 문법과 상당히 유사하다.
당연하다. 여기의 대부분은 HTML문법이다.
<!DOCTYPE html>
<html>
<head>
<style>
h2{color:blue}
</style>
</head>
<body>
<h1 style="color:red">Hello World</h1>
<h2>Hello world</h2>
</body>
</html>
여기서 노란색으로 칠해진 부분만 CSS문법인데, 둘은 똑같이 색을 칠한다는 의미이다.
<h1 style="color:red">Hello World</h1> 문장을 해석해보면
제목태그 h1을 사용하였고, style태그를 사용했으며, "Hello World"문장을 출력하려고한다.
추가적으로 CSS문법인 color를 직접적인 방식으로 사용해 빨간 글씨를 출력할 것이다.
h2{color:blue} 문자을 해석해보자.
h2제목태그를 사용한 분장이 있으면 style태그를 사용하여 색상을 파란색으로 출력할 것이다.
위에 코드를 실행하면 다음을 얻을수 있다.
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 기본부터 활용까지 - 상속 (0) | 2022.07.28 |
|---|---|
| CSS 기본부터 활용까지 - 가상클래스 선택자 (0) | 2022.07.25 |
| CSS 기본부터 활용까지 - 부모 자식 선택자 (0) | 2022.07.25 |
| CSS 기본부터 활용까지 - ID선택자 (0) | 2022.07.25 |
| CSS 기본부터 활용까지 - 선택자와 선언 (0) | 2022.07.25 |