1 분 소요

🖥 HTML / CSS 이전 글 보기

안녕하세요. Nerd Lee 입니다.

HTML과 CSS를 공부 한 내용 중 CSS의 기본구조에 대한 내용에 대해 알아보도록 하겠습니다.

CSS 기본 구조Permalink

1. CSS 공부 전 html의 코드Permalink

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>안녕 난 타이틀이야</title>
</head>
<body>
<h1>청춘예찬</h1>
<p> 대중을 위하여서 밥을 주며, 그들에게 힘차게 뭇 예수는 가슴에 운다. 작고 얼마나 만물은 청춘은 이상의 것은 것이다. 되려니와, 만천하의 뜨거운지라, 이는 생생하며, 그들을 듣는다. 수 두손을 방황하였으며, 무엇을 대중을 불어 이것을 생명을 동력은 것이다. 많이 용기가 청춘에서만 그것은 기관과 되려니와, 그들은 생의 목숨을 아름다우냐? 일월과 맺어, 피가 목숨이 끝에 것이다. 끓는 얼음 곳이 위하여서 위하여서. 인생에 온갖 인간에 지혜는 영원히 있는 피부가 그리하였는가? 이상의 새가 인생을 위하여 있음으로써 그들은 피고 없으면 피다. 끓는 얼마나 그와 싸인 소리다.이것은 것이다. 인간이 인도하겠다는 것은 얼마나 든 있을 인생에 것이다.
</p>
<p> 청춘의 풀이 실현에 때문이다. 광야에서 얼음에 이 구하기 그들은 대중을 목숨을 때문이다. 보내는 사랑의 살았으며, 따뜻한 피고, 원질이 황금시대의 눈이 것이다. 우리의 가지에 어디 무엇을 만천하의 운다. 설산에서 군영과 힘차게 가는 밥을 인생을 곳이 피어나기 할지라도 보라. 옷을 거선의 발휘하기 광야에서 피는 심장은 속에서 온갖 것이다. 대한 작고 인생을 품고 풍부하게 찾아 이상은 교향악이다. 싸인 그들은 만천하의 풀이 붙잡아 청춘은 이성은 새 우리 피다. 이상은 곧 튼튼하며, 많이 그들에게 평화스러운 청춘의 지혜는 이것이다. 착목한는 꽃이 천고에 무엇을 원질이 끓는다. 예가 그들은 힘차게 바로 이상을 피가 인생을 끓는 너의 아름다우냐?
</p>
<p> 싹이 그러므로 피가 원질이 우리는 모래뿐일 뿐이다. 부패를 많이 수 그와 것이다. 그들의 굳세게 위하여 이것을 그들을 말이다. 장식하는 곧 온갖 실현에 위하여서, 물방아 석가는 반짝이는 타오르고 황금시대다. 열락의 천지는 가치를 얼마나 때에, 뜨거운지라, 위하여 간에 바로 아니다. 되는 돋고, 못할 봄날의 피고, 이것이다. 대고, 이것은 심장의 품에 되려니와, 것은 놀이 것이다. 실현에 이상 인간의 사는가 가치를 놀이 쓸쓸하랴? 따뜻한 봄날의 위하여 하는 오아이스도 품고 두손을 트고, 할지라도 뿐이다. 뜨고, 우리 같은 아름다우냐?
</p>
<a href="http://www.davincimap.co.kr/davBase/Source/davSource.jsp?Job=Body&SourID=SOUR001850">청춘예찬 본문읽기</a>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
  • 위 코드로 공부를 진행했습니다.

2. CSS란 무엇인가?Permalink

  • Cascading Style Sheets의 약자로
    HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어라고 합니다.
    CSS는 HTML의 요소 하나하나를 어떻게 렌더링되어야 하는지를 지정할 수 있고
    Cascade란, 한국어로 종속을 뜻하는데 서로 다른 원점에서 가져온 속성 여럿을 조합해서
    최종 결과를 도출하는 알고리즘을 뜻한다고, MDN Web Docs에선 표시되어 있습니다.

3. CSS의 기본 구조Permalink

selector { property : value; }
예를 들어, <div class="class"></div> 이렇게 정해진 html의 div 태그가 있다면?
.class { margin : 0 auto; }
뭐 이런식으로 css를 사용할 수 있다.
view raw index.css hosted with ❤ by GitHub

4. CSS 사용 방법Permalink

4.1 ) HTML style 태그에서 사용하기Permalink

<body>
<style>
h1 { color: green; }
</style>
<h1>청춘예찬</h1>
<p> 대중을 위하여서 밥을 주며, 그들에게 힘차게 뭇 예수는 가슴에 운다. 작고 얼마나 만물은 청춘은 이상의 것은 것이다. 되려니와, 만천하의 뜨거운지라, 이는 생생하며, 그들을 듣는다. 수 두손을 방황하였으며, 무엇을 대중을 불어 이것을 생명을 동력은 것이다. 많이 용기가 청춘에서만 그것은 기관과 되려니와, 그들은 생의 목숨을 아름다우냐? 일월과 맺어, 피가 목숨이 끝에 것이다. 끓는 얼음 곳이 위하여서 위하여서. 인생에 온갖 인간에 지혜는 영원히 있는 피부가 그리하였는가? 이상의 새가 인생을 위하여 있음으로써 그들은 피고 없으면 피다. 끓는 얼마나 그와 싸인 소리다.이것은 것이다. 인간이 인도하겠다는 것은 얼마나 든 있을 인생에 것이다.
</p>
<p> 청춘의 풀이 실현에 때문이다. 광야에서 얼음에 이 구하기 그들은 대중을 목숨을 때문이다. 보내는 사랑의 살았으며, 따뜻한 피고, 원질이 황금시대의 눈이 것이다. 우리의 가지에 어디 무엇을 만천하의 운다. 설산에서 군영과 힘차게 가는 밥을 인생을 곳이 피어나기 할지라도 보라. 옷을 거선의 발휘하기 광야에서 피는 심장은 속에서 온갖 것이다. 대한 작고 인생을 품고 풍부하게 찾아 이상은 교향악이다. 싸인 그들은 만천하의 풀이 붙잡아 청춘은 이성은 새 우리 피다. 이상은 곧 튼튼하며, 많이 그들에게 평화스러운 청춘의 지혜는 이것이다. 착목한는 꽃이 천고에 무엇을 원질이 끓는다. 예가 그들은 힘차게 바로 이상을 피가 인생을 끓는 너의 아름다우냐?
</p>
<p> 싹이 그러므로 피가 원질이 우리는 모래뿐일 뿐이다. 부패를 많이 수 그와 것이다. 그들의 굳세게 위하여 이것을 그들을 말이다. 장식하는 곧 온갖 실현에 위하여서, 물방아 석가는 반짝이는 타오르고 황금시대다. 열락의 천지는 가치를 얼마나 때에, 뜨거운지라, 위하여 간에 바로 아니다. 되는 돋고, 못할 봄날의 피고, 이것이다. 대고, 이것은 심장의 품에 되려니와, 것은 놀이 것이다. 실현에 이상 인간의 사는가 가치를 놀이 쓸쓸하랴? 따뜻한 봄날의 위하여 하는 오아이스도 품고 두손을 트고, 할지라도 뿐이다. 뜨고, 우리 같은 아름다우냐?
</p>
<a href="http://www.davincimap.co.kr/davBase/Source/davSource.jsp?Job=Body&SourID=SOUR001850">청춘예찬 본문읽기</a>
</body>
view raw index.html hosted with ❤ by GitHub
  • <style> 태그 안에 h1 태그의 스타일을 지정해주는 코드를 작성했습니다.
    color는, 문자의 색상의 속성을 뜻하고 green은 아시다시피 초록색으로 지정했기에
    청춘예찬이라는 글씨가 초록색으로 변합니다.

4.2 ) 스타일을 변경 할 태그 안에 style 속성을 이용하기Permalink

<body>
<h1 style="color:green">청춘예찬</h1>
<p> 대중을 위하여서 밥을 주며, 그들에게 힘차게 뭇 예수는 가슴에 운다. 작고 얼마나 만물은 청춘은 이상의 것은 것이다. 되려니와, 만천하의 뜨거운지라, 이는 생생하며, 그들을 듣는다. 수 두손을 방황하였으며, 무엇을 대중을 불어 이것을 생명을 동력은 것이다. 많이 용기가 청춘에서만 그것은 기관과 되려니와, 그들은 생의 목숨을 아름다우냐? 일월과 맺어, 피가 목숨이 끝에 것이다. 끓는 얼음 곳이 위하여서 위하여서. 인생에 온갖 인간에 지혜는 영원히 있는 피부가 그리하였는가? 이상의 새가 인생을 위하여 있음으로써 그들은 피고 없으면 피다. 끓는 얼마나 그와 싸인 소리다.이것은 것이다. 인간이 인도하겠다는 것은 얼마나 든 있을 인생에 것이다.
</p>
<p> 청춘의 풀이 실현에 때문이다. 광야에서 얼음에 이 구하기 그들은 대중을 목숨을 때문이다. 보내는 사랑의 살았으며, 따뜻한 피고, 원질이 황금시대의 눈이 것이다. 우리의 가지에 어디 무엇을 만천하의 운다. 설산에서 군영과 힘차게 가는 밥을 인생을 곳이 피어나기 할지라도 보라. 옷을 거선의 발휘하기 광야에서 피는 심장은 속에서 온갖 것이다. 대한 작고 인생을 품고 풍부하게 찾아 이상은 교향악이다. 싸인 그들은 만천하의 풀이 붙잡아 청춘은 이성은 새 우리 피다. 이상은 곧 튼튼하며, 많이 그들에게 평화스러운 청춘의 지혜는 이것이다. 착목한는 꽃이 천고에 무엇을 원질이 끓는다. 예가 그들은 힘차게 바로 이상을 피가 인생을 끓는 너의 아름다우냐?
</p>
<p> 싹이 그러므로 피가 원질이 우리는 모래뿐일 뿐이다. 부패를 많이 수 그와 것이다. 그들의 굳세게 위하여 이것을 그들을 말이다. 장식하는 곧 온갖 실현에 위하여서, 물방아 석가는 반짝이는 타오르고 황금시대다. 열락의 천지는 가치를 얼마나 때에, 뜨거운지라, 위하여 간에 바로 아니다. 되는 돋고, 못할 봄날의 피고, 이것이다. 대고, 이것은 심장의 품에 되려니와, 것은 놀이 것이다. 실현에 이상 인간의 사는가 가치를 놀이 쓸쓸하랴? 따뜻한 봄날의 위하여 하는 오아이스도 품고 두손을 트고, 할지라도 뿐이다. 뜨고, 우리 같은 아름다우냐?
</p>
<a href="http://www.davincimap.co.kr/davBase/Source/davSource.jsp?Job=Body&SourID=SOUR001850">청춘예찬 본문읽기</a>
</body>
view raw index.html hosted with ❤ by GitHub
  • <h1> 태그 안에 직접 style 속성에, css의 속성값을 사용할 수도 있습니다.

4.3 ) CSS 파일을 만들어서 html에 연결해서 사용하기Permalink

  • index.css 라는 파일을 만들어준다.
  • <head> 태그 안에 <link> 태그를 추가한다.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>안녕 난 타이틀이야</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
view raw index.html hosted with ❤ by GitHub
h1 {
color: green;
}
view raw index.css hosted with ❤ by GitHub

글이 길어지기 때문에, 2편으로 다시 돌아오겠습니다!


이 글이 도움이 되셨다면 댓글 부탁드립니다^^
다음 글로 찾아오겠습니다!

참고