201117_TIL

hyeojung·2020년 11월 17일

TIL

목록 보기

38/62

📚 edwith 부스트코스 : 웹 프로그래밍

CSS - FE

float 기반 샘플 화면 레이아웃 구성

자식이 float인 경우, 자식으로 생각하지 않는다. 이럴 땐 overflow 값을 줘서 float를 인식하게 할 수 있음
overflow:auto; 또는 hidden 값을 줘서 float를 인식하게 할 수 있음. 이외에도 다양한 방법이 있다
position: static;이면 absolute의 기준점이 될 수 없다. relative 값을 줘야 함

html 코드

<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>jamie</li>
    <li>ella</li>
  </ul>
  </div>
  <div class="realright">
    oh~ right
  </div>
</div>
<footer>코드스쿼드(주)</footer>

css 코드

header {
  background-color: #eee;
}

#wrap {
  overflow:auto;
  margin: 20px 0px;
}

footer {
  background-color: #eee;
  clear:both;
}

.left, .right, .realright {
  float: left;
  height:200px;
}

.left {
  width:10%;
  margin-right:3%;
  background-color:#47c;
}

.right {
  width:60%;
  text-align:center;
  background-color:#42c;
}

.realright {
  background-color: #422;
  color:#fff;
  width:17%;
  margin-left:3%;
}

.right > h2 {
  position: relative
}

.right .emoticon {
  position: absolute;
  top:0px;
  right:25%;
  color:#fff;
}

li {
  list-style:none;
}

디버깅 - html - css

크롬 개발자 도구의 element 탭: 맥 기준 Opt + Cmd + I
사이트의 각 요소를 누르면 그 요소가 DOM 노드(계층 구조)의 어떤 부분에 위치하는지 알 수 있음
style 탭에서 요소의 style 정보(브라우저가 어떻게 css 코드를 파악했는가)를 볼 수 있고, 종합된 정보는 computed 탭에서 볼 수 있음
style 탭에서는 셀렉터의 우선순위에 따라 어떤 정보가 반영되었는지를 디버깅하기 좋게 보여준다,,, 누구한테 상속받았는지도 알 수 있음
style 탭에서는 새로운 rule을 작성해 시험해 볼 수 있는데, 이때 입력한 코드는 inspector-stylesheet라는 개발자 도구에서만 쓸 수 있는 임시 공간에 저장된다.