seoyoung.dev

[CSS]Selector/Font/Element 배치 본문

WEB/HTML&CSS

[CSS]Selector/Font/Element 배치

seo-0 2019. 9. 3. 16:53
* css 의 구성 
span { color : red; }

span : selector, color : property, red : value 

 

* style 을 html 페이지에 적용하는 3가지 방법 

1. inline - HTML 태그 안에다가 적용 

2. internal - style 태그 

3. external - 외부파일(.css) 사용  (<link rel="stylesheet" href="style.css">)

* css의 상속 
    <style>
        div ul li div p {
          color : green;
          font-size : 30px;
        }
        body > div {
          color : red;
          border:2px solid slategray;
          padding : 30px;
        }
    </style>

box-model 이라고 불리는 속성들 ( width, height, margin, padding, border ) 과 같이, 크기와 배치에 관련된 속성들은 하위 엘리먼트로 상속이 되지 않는다. 

 

* cascading 

- 선언 방식에 따른차이 : inline > internal > external (internal 과 external은 같은 우선순위를 갖는다) 

span {
color : blue;
}
span{
color : red;
}

--> red 적용 :: 같은 노드를 가리키는 경우, 뒤의 것이 적용 

body > span {
color : blue;
}
span{
color : red;
}

--> blue 적용 ::  body 하위에 span vs 그냥 span // 더 구체적으로 표현된 것에 먼저 우선 적용 

<div id ="a" class="b">
     text..
 </div>
   #a{
       color: red;
     }
   .b{
        color : blue;
      }
   div{
   	color : green;
      }

--> red 적용 :: id 값 > class > element (우선순위)

* css selector 
  <span id ="myspan">my text is upper! </span>
  #myspan{
        color : red;
      }

id 로 지정 -> css 에서 #"id"   : 해당 id 갖는 태그에 모두 적용 

  <span class="spanClass">my text is upper! </span>
.spanClass{
        color : red;
      }

class 로 지정 -> css 에서 ."class" 

  <div id="jisu">
            <h2> 단락 선택 </h2>
            <p>첫번째 단락</p>
            <p>두번째 단락</p>
            <p>세번째 단락</p>
            <p>네번째 단락</p>
          </div>
  #jisu > p:nth-child(2) {color: red;}
  #jisu > p:nth-of-type(2) {color: green;}
  • nth-child(2) --> jisu 라는 id를 갖는 태그의 두번째 자식이 p태그이면, 해당 태그에 css 를 적용해 달라는 뜻이다. 
  • nth-of-type(2) --> jisu라는 id를 갖는 태그 자식들 중, 두번째로 나오는 p태그에 css를 적용. 두번째에 나오는  태그의 타입이 p,span, p 순서여도 세번째 나오는 p가 두번째 p이므로 해당 태그에 css 적용 
* font 
  <style>
      body > div {
        font-size:32px;
        background-color : #8200ffad;
        font-family: "Gulim";
      }
      .myspan{
        color: #f00;
        font-size: 2em;
      }
    </style>

-color

  • color : red;
  • color : rgba(255, 0, 0, 0.5);
  • color : #ff0000;   //16진수 표기법으로 가장 많이 사용되는 방법이죠.

- font size

body > div : 32px ( 기준값 ) 

.myspan 내에서 font-size: 2em --> 부모 노드에서의 기준값(32px)의 상대적인 크기 : 64px 

* 엘리먼트 배치

: 엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, rendering 과정이라고도 한다.  -( 배치 )

-display (block, inline , inline-block)

-position (static, absolute, relative, fixed)

-float (left, right)

  • display
<body>
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
</body>
div{
  height:100px;
  width:100px;
  border:1px solid gray;
}

원래 block 속성을 갖는 div 태그는 위에서 아래로 쌓인다. ( p태그도 block 속성 )

: 대부분 다 block 속성 

div{
  height:100px;
  width:100px;
  border:1px solid gray;
  display : inline
}

inline 속성으로 변경 : 우측으로 흐르고, 꽉 차면 아래로 내려간다.

<body>
  <span>나는 어떻게 배치되나요?</span>
  <span>좌우로 배치되는군요</span>
  <a>링크는요?</a>
  <strong>링크도  강조도 모두 좌우로 흐르는군요</strong>
  모두 다 display 속성이 inline인 엘리먼트이기 때문입니다.
</body>
  • position: 엘리먼트 배치가 순서대로 위에서 아래, 좌우로만 흐르면서 쌓이기만하면, 다양한 배치가 어렵다.

- absolute: 기준점에 따라 특별한 위치에 위치. top/left/right/bottom ,

기준점 = 상위 엘리먼트의 position이 뭔지 보고, static이 아닌 position이 기준점 

-relative : 원래 자신이 위치해야 할 곳을 기준으로 이동 

<body>
  <div class="wrap">
    <div class="static">static</div>
    <div class="relative">relative</div>
    <div class="absolute">absolute</div>
    <div class="fixed">fixed</div>
  </div>
.wrap{
  position: relative;
}

.wrap > div{
  width:150px;
  height:100px;
  border:1px solid gray;
  font-size: 0.7em;
  text-align:center;
  line-height:100px;
}

.relative{
  position:relative;
  left:10px;
}
.absolute{
  position:absolute;
  left:130px;
  top:30px;
}
.fixed{
position:fixed;
top:250px;
}

: absolute 는 static(position==relative) 의 왼쪽 꼭짓점을 기준점으로 삼기 때문에, 기준점으로부터 left, top 에 위치한다. 

( absolute 는 기준점으로부터 0px 이더라도, 항상 top과 left  둘다 적어준다.)

: 부모 중에 position이 static 이 아닌 게 없는경우, 기준점은 body

 

: fixed 는 스크롤해도 항상 그대로 위치가 고정 

 

 

 

 

 

 

 

 

* float 기반 샘플 화면 layout 구성 

https://codepen.io/himalayaah/pen/wvwPbMK

 

wvwPbMK

...

codepen.io

...더보기 
<header>부스트 코스는 정말 유익합니다.</header>
<div id="wrap">
  <nav class="left">
    <ul>
      <li>menu</li>
      <li>home</li>
      <li>name</li>
    </ul>
  </nav>
  
  <div class="right">
      <h2>
        <span> 반가워요!</span>
        <div class="emoticon">:-)</div>
   
    </h2>
      
  <ul>
    <li>crong</li>
    <li>jk</li>
    <li>honux</li>
  </ul>
  </div>
  
  <div class="realright">
    oh~ right!
  </div>
</div>
<footer>부스트코스</footer>
header{
  background-color: #eee;
  
}
li{
  list-style:none;
}
#wrap{
  overflow: auto;
 margin:20px 0px;
}
.left,.right, .realright{
  float: left;
  height:200px;
}
.left{
  width:17%;
  margin-right:3%;
  background-color:#47c;
}
.right{
  width:60%;
  text-align: center;
    background-color:#47c;
}
.realright{
  width:17%;
  margin-left:3%;
  background-color:#67c;
  
}
.right >h2 {
  position :relative;
}
.right .emoticon{
  position : absolute;
  top:0px;
  right: 30%;
  color:#fff;
}

footer{
    background-color:#777;
  clear:left;
}

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

[CSS]반응형 디자인  (0) 2019.09.03
[CSS] 그리드  (0) 2019.09.03
'WEB/HTML&CSS' Related Articles more