지금까지 html로 Layout을 잡았다. 하지만 CSS로 Layout을 잡을 수 있다.

Display

CSS로 Layout을 수정할 수 있는 속성 중 하나로 사용하는 요소(태그)가 block단위인지 inline단위인지 잘 알고 사용해야 한다.

1.block : 블럭 단위로 영역이 형성되는 레이아웃으로 대표적인 요소로 div와 p가 있다.

2.inline : line혹은 작성한 문자열 단위로 영역이 형성된다.

예를 들어보자

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Layout</title>
</head>
<body>
<div style="color:red">
  이곳은 div영역입니다.
  block단위 요소 입니다.
</div>
<p style="color:blue">
  이곳은 p영역입니다.
  block단위 요소 입니다.
</p>
<span style="color:purple">이곳은 span영역입니다. inline단위 요소입니다.</span>
이곳은 body 영역입니다.
</body>
</html>

이처럼 div와 p는 block 단위의 요소인것을 볼 수 있다. 여백이 남았음에도 불구하고 해당 블럭 밖에 다음 요소가 위치하는것을 볼 수 있다. span은 inline요소이므로 문자열 단위로 영역이 형성되어 다음 문자열이 바로 옆에 위치함을 볼 수 있다.

이러한 속성을 가진 요소들을 수정 해 보면

이러한 block요소들을 제거 해 보자

* {
  border:1px solid blue;
}
div,p{
 display: inline; 
}

span{
  display: block;
}

위 css파일만 적용 시키면 span과 div의 display가 바뀐것을 볼 수 있다.

position

CSS로 영역 말고 위치를 지정해 줄 수 있다.

  1. static : 기본, 쓰지 않아도 자동으로 지정 되어있다.
  2. relative : 가장 상위에 있는 static을 기준으로 위치를 지정할 수 있다.
  3. absolute : static을 제외한 상위 영역을 기준으로 위치를 지정할 수 있다. 상위 영역이 없다면 body를 기준으로 한다.
  4. fixed : 현재 화면의 왼쪽 상단을 기준으로 한다.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Layout</title>
</head>
<body>
<div class="pos1">span1</div>
<div class="pos2">span2</div>
<div style="position:relative">
  <span style="background-color:gray">dfdssdfsjsovist nsovisniostisld</span>
  <div class="pos3">span3</div>
</div>
</body>
</html>
* {
  border:1px solid blue;
}

.pos1{
  position:static;
}

.pos2{
  position:relative;
  top:2px;
  bottom:5px;
  left:5px;
  z-index:1;
}

.pos3{
  position:absolute;
  background-color:red;
  left:2px;
  top:5px;
}

.pos4{
  position:fixed;
  color:blue;
}

이처럼 span2는 span1을 기준으로 마진을 둔 것이고 span3는 상위div를 기준으로 마진을 둔 것인데 그 div가 없다면 body를 기준으로 마진을 두었을 것이다.

'FRONT > CSS' 카테고리의 다른 글

[Front] CSS 기초  (0) 2020.06.11

[Front] CSS 기초

CSS

css는 html을 디자인하는 속성 혹은 문서를 의미한다. 

CSS는 Selector, property, value의 형태를 가지고 있다.

CSS 적용 방법

html코드에 CSS를 적용하는 방법은 3가지가 있다.

 

1.inline : inline방식은 말 그대로 라인에다가 정의하는 방식으로 원하는 태그 내에 style 속성을 사용하여 CSS를 적용하는 것이다.

  • 형식 <태그 style=”속성 값”> *속성값이 여러가지인 경우 큰 따옴표 안에 모두 정의하고 속성 값마다 세미콜론(;)으로 구분해야한다.
  • selector =태그,id,class,   property , value=속성 값
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS</title>
</head>
<body>
  <div>
    <p style="color:red; font-size:20px;">
      이곳은 문단입니다.
      색은 빨간색이죠.
    </p>
  </div>
</body>
</html>

이런 식으로 디자인 할 수 있다.

 

2. internel : 내부에서 정의 하는 방법으로 해당 html파일의 <head>태그 내에 <style>태그로 정의하면 된다.

  • 형식 : <style> 변경하고자 하는 태그 or id or class{ 속성 값 }
  • selector = 변경하고자 하는 태그, property, value = 속성 값
<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      color:red;
      font-size:20px
    }
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS</title>
</head>
<body>
  <div>
    <p>
      이곳은 문단입니다.
      색은 빨간색이죠.
    </p>
  </div>
</body>
</html>

역시 똑같이 나오는것을 알 수 있다.

 

3. externel : 외부에서 정의하는 방법으로 해당 html외에 .css로 확장자가 css인 파일을 만들어 적용하고자 하는 html과 연결하여 사용한다.

  • 형식 : 형식은 internal <style>태그 내부에 정의 하는 방식과 같다. 다만 css는 style을 위한 파일이기 때문에 style태그를 정의 할 필요 없다.
  • 연결 방법 : <link rel=”stylesheet” href=”css파일의 경로” type=”text/css”>태그를 연결 하고자 하는 html의 <head>태그 내에 선언하면 된다.
/* CSS용 주석*/
div {
  color:red;
  font-size:20px
}​
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css파일이름.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS</title>
</head>
<body>
  <div>
    <p>
      이곳은 문단입니다.
      색은 빨간색이죠.
    </p>
  </div>
</body>
</html>

결과 역시 셋다 같다.

4.혼합 : 가장 많이 쓰는 경우로 기본적으로 externel로 정의하고 특별한 부분만 inline이나 internel방식을 사용한다.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color:red;
    }
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS</title>
</head>
<body>
  <div>
    <p style="font-family:굴림; font-size:20px;">
      이곳은 문단입니다.<br>
      글꼴은 굴림 입니다.<br>
      색은 빨간색이죠.
    </p>
    <p>
      이곳은 정상입니다.
    </p>
  </div>
</body>
</html>​

위와 같이 코드를 작성하면 아래와 같은 결과를 얻는데 모두 적용됨을 알 수 있다.

id와 class

선언과 적용 방법 : 

이처럼 선언하여 아래처럼 적용하면 된다.

 /*클래스*/
 .red{
      color:red;
    }
 /*아이디*/
#blue{
      color:blue;
    }
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS</title>
</head>
<body>
  <div>
    <p class="red">
      이곳은 클래스의 영역입니다.
    </p>
    <p id="blue">
      이곳은 아이디의 영역입니다.
    </p>
    <p class="red">
      이곳도 클래스의 영역입니다.
    </p>
  </div>
</body>
</html>

얼핏 둘 다 같은 기능을 하는것 처럼 보이지만 class는 여러번 사용할 수 있다. 하지만 id는 의미처럼 한번 사용할 수 있다. 이는 나중에 JS에서 getElementById()메서드를 통해 지정된 ID를 가진 요소에 엑세스 할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS</title>
</head>
<body>
  <h1 id="myId">이것이</h1>
  <button onclick="changeDis()">이걸 누르면</button>
 <script>
   function changeDis(){
     document.getElementById("myId").innerHTML = "이걸로 바뀝니다!"
   } 
 </script>
</body>
</html>

CSS의 적용 우선순위

css는 선언할 수 있는 경우의 수가 많고 겹칠 수 있기 때문에 우선순위를 잘 알고 사용해야한다.

1. inline>internel>externel : 같은 속성의 제어라면 inline의 영향을 받는다.

 

2. 태그 이름으로 속성을 정했다면 세부설정이 더 깊은 쪽으로 영향을 받는다. 이는 이해하기 어려울 것이므로 예를 통해 알아보자.

div{
  font-size:10px;
  color:red;
}

/*div영역 내에 p태그를 의미한다.*/
div > p {
  font-family:바탕체;
  color:blue;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS</title>
</head>
<body>
  <div>
    이곳은 div영역입니다.
  </div>
  <div>
    <p>
      이곳은 div영역이면서 p영역입니다.
    </p>
    나는 div영역 입니다.
  </div>
  <p>
    나는 그냥 p 영역입니다.
  </p>
</body>
</html>

이와 같이 작성하면 div안에 있는 p영역 또한 div의 영역이므로 div의 영향을 받지만 div > p 의 보다 세부적인 selector때문에 같은 속성을 가지는 색에 대해서 blue가 나온것을 알 수 있다.

 

3. id>class>element : id와 class의 영향을 동시에 받는다면 id를 우선적으로 받는다.

'FRONT > CSS' 카테고리의 다른 글

[Front] CSS Layout  (0) 2020.06.12

+ Recent posts

티스토리툴바