책보고 무작정 따라하는 웹 사이트 설계 - 3편

책보고 무작정 따라하는 웹 사이트 설계 - 3편 -

HTML에 이어서 오늘은 CSS를 하고자 합니다. HTML로 구조를 짰으니, CSS로 옷을 입혀보겠습니다.

HTML and CSS

(6) CSS이란?

CSS는 Cascading Style Sheet의 약자라고 합니다. 무슨 말인지 모르겠네요.

CSS의 구성요소는 HTML에 할당할 영역, 속성, 속성값으로 구성되어 있다고 합니다.

예) HTML에 할당할 영역

{

속성: 속성값;

}

(7) CSS을 HTML에 적용하는 방법 3가지

① 인터널 : HTML문서에 <style>태그를 사용한 방법

② 인라인 : HTML태그에 style속성을 사용한 방법

③ 익스터널 : xx.CSS 을 만들어 HTML문서와 연동하는 방법

지금 생각해보면 티스토리 스킨에 이 중 2가지 방법이 사용된 것 같습니다.

① 인터널 -> x

② 인라인

<p>예) <b><span style="background-color: rgb(250, 237, 125);">HTML에 할당할 영역</span></b></p>

<span> 태그에 style 속성을 사용.

③ 익스터널

티스토리 속 익스터널 방법

티스토리 속 익스터널 방법1

위와 같이 CSS 파일을 적용한 모습

우선 3번째 방법인 익스터널을 먼저 해보겠습니다.

HTML 문서와 CSS 문서를 연동하는 것을 실습해 보겠습니다.

지난번 실습했던 HTML 파일을 열고 옆에 style.css 파일을 만들어보겠습니다.

style.css

이 후 HTML 파일에 CSS의 경로를 링크로 달아줘야 한다고 합니다.

HTML문서에 CSS문서의 링크 달기

여러개의 CSS 문서를 달아줄 수도 있다고 합니다.

css1에 값 넣어보기

결과는

CSS 2개 적용한 값

위와 같이 style에 적용한 blue값이 <ol>태그에 적용되었고, style1의 red값이 <ul>태그에 적용된 모습을 볼 수 있습니다.

이번에는 인라인 방법을 사용해 보겠습니다.

<nav>태그에 style 속성으로 배경색 "green"을 입혀보겠습니다.

맨 마지막에 있는 nav 리스트들에게 배경색이 입혀짐을 볼 수 있습니다.

마지막으로

인터널 방법을 사용하여 적용해 보겠습니다.

<head>태그 안에 적용해야 적용된다 하니, 전역변수와 지역변수 중 전역변수 같은? 개념 같습니다.

위와 같이 <h1>태그를 만들어서 <style>태그를 입히고 red를 적용되게 하니

결과가 잘 나옴을 볼 수 있습니다.

이 방법은 쓸 일이 있을까 합니다. 있겠죠?ㅋㅋ 설계를 잘하면 유용하겠지만, 아니면 불필요해 보입니다.

(적용한 태그에 모두 나타나니, 안쓰고 싶어도 적용될테니까요)

오늘은 여기까지

- 끝 -

☞ 책보고 무작정 따라하는 웹 사이트 설계 - 2편 -

저작자표시 비영리 변경금지

'강화도라이프 > 블로그 & 웹 사이트' 카테고리의 다른 글

[티스토리] 구글 애드센스 결제 수단 추가 (0)	2019.10.05
[메모] 티스토리(TISTORY) 최적화 - 1편 - (0)	2019.09.19
책보고 무작정 따라하는 웹 사이트 설계 - 2편 - (0)	2019.08.26
책보고 무작정 따라하는 웹 사이트 설계 - 1편 - (0)	2019.08.25
티스토리 블로그 스킨 꾸미기 - 사이드바(sidebar) 3편 - (2)	2019.08.19

책보고 무작정 따라하는 웹 사이트 설계 - 3편 -