DAY4) CSS

margin, padding의 기본값이 정해져있음

기본설정값은 불필요하므로 0 으로 설정하여 초기화 시킨 후 진행
ex) reset.css파일 만들어서 초기화셋팅 가능

body {
 margin: 0;
 padding: 0;
}

요소에는 font-size에는 16px 기본값으로 정해져있음

굳이 설정하지 않음

div 태그는 인지하기로는,
-가로는 100%인것처럼 왼쪽부터 오른쪽까지 꽉찬것처럼 보임
-높이는 들어가있는 내용의 높이만큼 늘어남

default 값
width : Auto
height :Auto

width: 980px
가로 980px만큼 띄우고 margin Auto로
수평중앙으로 정렬
자동적으로 동일하게 띄움
->header 가 가운데로 모여짐

body {
 margin: 0;
 padding: 0;
}
.header {
 background: yellowgreen;
}
.container {
 background: tomato;
 width: 980px;
 margin: auto;
}
.container-left {

}
.logo {

}
.menu {

}

메뉴아이템 수평으로 설정

.menu-item {
   float: left;
}

float요소를 띄우면서 수평을 만듦
띄우면서 배경이 포함되지 않는 문제점이 발생
해결방안이 clear fix

clear fix
menu-item의 부모요소 menu에 clearfix처리함

HTML>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>GitHub</title>
  <link rel="stylesheet" href="./main.css">
</head>
<body>
  <div class="header">
    <div class="container">
      <div class="container-left">
        <div class="logo"> 
          <img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="GitHub Logo">
        </div>
        <div class="menu clearfix">
          <div class="menu-item">Personal</div>
          <div class="menu-item">Open Source</div>
          <div class="menu-item">Business</div>
          <div class="menu-item">Explore</div>
        </div>
      </div>
    </div>
  </div>
  
</body>
</html>

CSS>

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Logo 와 menu 사이 간격 설정

margin-right로

.logo {
 float: left;
 margin-right: 5px;
}

img 삽입 시 아래에 원치않는 띄움이 발생 해제

.logo img {
 display: block;
}

수직정렬
float을 해제하는 기능
위,아래를 띄워서 수직정렬 가능하게 함

헤더 아래에 실선 설정

border-bottom 1px로 가는(solid) 색상

header {
background: white;
border-bottom: 1px solid red;
}

padding설정의 경우
최상위요소보다는 최하위, 변경된 부분이 보기 용이한 가까운 요소에 설정

Menu item 간의 간격 만들기

margin 사용

.menu-item {
  float: left;
  margin-right: 10px;

Logo와 menu 수평 만들기

logo와 menu 에 float 사용 후
해제 작업 clearfix를 logo와 menu의 부모요소 container-left에 clearfix 입력

.logo {
 float: left;
}
.menu {
  float: left;
}

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Github</title>
  <link rel="stylesheet" href="./main.css">
</head>
<body>
  <div class="header">
    <div class="container">
      <div class="container-left clearfix">
        <div class="logo">
          <img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="GitHub Logo">
        </div>
          <div class="menu clearfix">
            <div class="menu-item">Personal</div>
            <div class="menu-item">Open Source</div>
            <div class="menu-item">Business</div>
            <div class="menu-item">Explore</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Logo와 menu 간격 띄우기

Logo 에 margin 5px만큼 간격 생성

.logo {
 float: left;
 margin-right: 5px;

수직정렬

padding 사용하여 위,아래 내부영역을 넓혀줌

ex)
////////
Personal
///////

수평중앙

margin 사용하여 좌우여백 auto 사용하여 중앙정렬

ex)
///////personal/////

주석 처리

이 코드는 무시하겠다는 의미

 /* margin-right: 10px; */

Padding으로 여백 설정

padding: 8px 10px; 은

padding-top: 8px;
padding-bottom: 8px;
padding-left: 10px;
padding-right: 10px;

와 같음

속기
아래와 같은 내용 속기로 가능

padding-top: 8px;
padding-bottom: 8px;
padding-left: 10px;
padding-right: 10px;

.menu-item {
 float: left;
  padding: 8px 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left:  10px;
  padding-right: 10px;
}

Author And Source

이 문제에 관하여(DAY4) CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jeonbora/DAY4-CSS

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

DAY4) CSS

Author And Source

좋은 웹페이지 즐겨찾기