CSS 내용정리

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Archives

Recent Posts

02-08 13:57

Today

Total

Link

Recent Comments

관리 메뉴

연의 기록 🪁

CSS 내용정리 - 2 본문

WEB/HTML+CSS+JS

CSS 내용정리 - 2

kite707 2020. 12. 29. 23:14

오늘은 WEB2 CSS - 8. 박스모델 부분부터 이어서 공부를 할거다.

링크는 아래에 있다!

https://opentutorials.org/course/3086/18319

박스모델 - 생활코딩

CSS box model 소개 강의 소스코드 변경사항 박스 모델을 써먹기 강의 소스코드 변경사항

opentutorials.org

코드는 이상태에서 시작한다!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      h1, a{
        border: 5px red solid;
      }
      </style>
  </head>
  <body>
    <h1>CSS</h1>Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/CSS">CSS</a>) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.
  </body>
</html>

시작하기전 padding, border, margin이 각각 어느 부분을 가리키는지 보고 넘어가도록 하자

block level element 와 inline element

block level element : 한 라인 모두 차지(한 라인에 하나만 올 수 있다.)
inline element : 해당 부분만 차지(한 라인에 여러개 올 수 있다.)

block level element -> inline element

display:inline;

inline element -> block level element

display:block;

이 내용을 실제로 적용해서 h1태그와 a태그로 둘러싸인 부분을 block level element로 바꾸는 코드는 아래와 같이 작성한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      h1, a{
        border: 5px red solid;
        padding: 20px;
        margin: 20px;
        display: block;
      }
      </style>
  </head>
  <body>
    <h1>CSS</h1>
    <h1>CSS</h1>
  </body>
</html>

개발자도구 이용하기

이제 우리는 코드를 보고 어떤 부분이 어디에 영향을 미치는지 파악을 할 수 있게 되었다. 해당페이지의 코드를 보려면 개발자 도구를 이용하면 된다. 크롬에서는 개발자 모드를 Ctrl + Shift + I 키를 눌러 들어갈 수 있다. (Mac의 경우 Cmd + Opt + I키)

개발자 도구에 들어간 뒤 마우스를 코드에 가져다대면 해당 코드가 어디에 영향을 주는지 알 수 있다.

박스모델 활용하기

아래는 실습을 진행한 코드이다.

<!doctype html>
<html>
<head>
  <title>WEB - CSS</title>
  <meta charset="utf-8">
  <style>
    body{
      margin:0;
    }
    #active {
      color:red;
    }
    .saw {
      color:gray;
    }
    a {
      color:black;
      text-decoration: none;
    }
    h1 {
      font-size:45px;
      text-align: center;
      border-bottom:1px solid gray;
      margin:0;
      padding:20px;
    }
    ol{
      border-right:1px solid gray;
      width:100px;
      margin:0;
      padding:20px;
    }
  </style>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html" class="saw">HTML</a></li>
    <li><a href="2.html" class="saw" id="active">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>CSS</h2>
  <p>
    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
  </p>
  </body>
  </html>

CSS에대한 설명을 올리는 것은 다음 강의에서 한다고 한다.

'WEB > HTML+CSS+JS' 카테고리의 다른 글

CSS 내용정리 - 4 (0)	2020.12.31
CSS 내용정리 - 3 (0)	2020.12.30
CSS 내용정리 - 1 (0)	2020.12.22
HTML 기초 내용 정리 - 4 (0)	2020.12.06
HTML 기초 내용 정리 - 3 (0)	2020.12.06

'WEB/HTML+CSS+JS' Related Articles