CSS 복습 - 적용 방법 및 선택자, 주요 속성

728x90

<목차>

1) CSS 기초

1-1) CSS를 사용하는 이유

1-2) CSS 특징

1-3) CSS 적용 방법

1-3-1) head 영역에 style 태그 추가

1-3-2) inline style

1-3-3) link 태그를 이용해 외부 파일 연결

1-4) CSS 선택자

1-5) CSS 주요 속성

1-5-1) backgruoud-color

1-5-2) width 와 height

1-5-3) font-size

1-5-4) margin

1-5-5) padding

1-6) block, inline, inline-block

2) 연습 코드

1) CSS 기초

Cascading Style Sheets(CSS)는 마크업을 디자인하기 위해 작성돤 언어이다.

CSS 역할: CSS는 기본적으로 HTML을 꾸며주는 역할을 하는데 이는 CSS가 HTML의 속성을 변경할 수 있음을 의미한다.

+) HTML의 역할은 데이터를 구분하는 것 뿐이다!!

1-1) CSS를 사용하는 이유

Markup Language만으로도 웹 페이지를 만들 수는 있지만,

CSS를 사용하면 HTML에서 스타일 파트만 따로 관리 할 수 있고,

스타일의 서식을 공유해서 여러 웹 페이지에 서식을 재사용할 수 있고, 통일할 수 있다.

즉, 수정 혹은 기타 작업 편의성을 높이기 위해 사용한다고 할 수 있다.

1-2) CSS 특징

CSS의 내용은 일종의 object와 같은 형태를 띄고 있음( 물론 형태가 유사한 것이지 진짜 object는 아님!! )
CSS는 항상 "key : value;"의 형태를 지님
- font-size : 12px;
- background-color : black;
- +) 참고로 컴퓨터 화면에서 안 깨지고 잘 보이기에 가장 많이 쓰이는 글자 크기가 "12px"임
코드 끝에는 항상 세미콜론(;)을 붙여서 반드시 끝나는 부분을 명시해야 함
- 끝나는 부분을 명시적으로 표시함으로써 코드 가독성을 높임
- 세미콜론(;)이 없으면 컴퓨터가 이해를 못함

+) CSS의 경우, height 값이 지정되어야(높이가 있어야) background에 색깔 혹은 url을 넣을 수 있음!!

>> 따라서 태그에 텍스트를 넣어주면 해당 텍스트 높이만큼 background 속성에 지정한 색깔이 칠해짐

1-3) CSS 적용 방법

HTML 문서에 CSS를 적용하는 방법은 다음과 같이 3가지가 존재함

head 영역에 style 태그 추가
inline style
link 태그를 이용해 외부 CSS 파일과 연결

1-3-1) head 영역에 style 태그 추가

style 태그는 head 영역에 추가되며, 선택자를 이용해 CSS를 적용할 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>practice</title>
    <style>
      #bigger {
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <div id="bigger">hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
  </body>
</html>

id 선택자를 이용해 CSS를 적용하니 첫 번째 div 태그의 텍스트만 커진 것을 확인할 수 있다.

선택자에 대해선 이후 1-4) 선택자 파트에서 다시 다룰 예정이다.

1-3-2) inline style

HTML 문서 상 스타일을 적용할 태그에 대해 style 속성을 따로 부여하여 CSS를 적용할 수도 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>practice</title>
  </head>
  <body>
    <div style="font-size: 100px; font-style: italic">hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
  </body>
</html>

위와 같이 style 속성이 부여된 div 태그의 텍스트만 'italic'체로 바뀜과 동시에 글자 크기가 훨씬 커진 것을 확인할 수 있다.

1-3-3) link 태그를 이용해 외부 CSS 파일과 연결

HTML 파일 외부의 CSS 문서를 연결하기 위해서는 link 태그를 사용해야 하며,

사용 순서는 다음과 같다.

CSS 파일 생성

link 태그 입력

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="" type="text/css" />
</head>

href 속성에 연결할 CSS 파일의 경로 입력

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./style.css" type="text/css" />
</head>

이렇게 해주면 HTML 문서에 CSS 파일이 연결된다.

href에 입력하는 경로는 절대경로와 상대경로를 이용하며,

절대 경로는 처음부터 끝까지 해당하는 모든 경로를 전부 다 표기하고,

상대 경로는 현재 폴더를 기준으로 표기한다.

" . " : 현재 폴더
" .. " : 이전 폴더
" ~/ " : ~ 이름의 폴더로 이동

이후에는 CSS 파일에서 작성하면 되는데,

작성 방법은 1) head 영역에서 선언한 style 태그 추가 방법과 동일하다.

+) 적용 우선 순위: 위의 적용 방법들을 중복해서 사용할 시 inline style이 최우선으로 적용되며, 나머지는 나중에 적힌 코드( 1번, 3번의 경우 )가 실행됨 >> 물론 실전 프로젝트에서는 주로 3) link 태그를 이용한 외부 파일 연결 방법 하나 사용함

1-4) 선택자

head 영역에 있는 style 태그를 이용한 경우와

link를 이용해 외부 파일을 연결한 경우에는

선택자를 이용해 어떤 태그에 스타일을 부여할지 지정해줘야 한다.

아래에서 설명하는 것보다 다양한 선택자가 있지만 가장 많이 쓰이는 대표적인 선택자만 우선 정리하였다.

태그 선택자: 특수 기호 없이 태그의 이름만으로 선택한다.

div { font-size: 16px; }

id 선택자: "#" 기호를 이용해 스타일을 적용할 특정 id를 선택(#특정 id 명)한다.

#id { font-size: 16px; }

class 선택자: "." 기호를 이용해 스타일을 적용할 특정 class를 선택(.특정 class 명)한다.

.class { font-size: 16px; }

자식 선택자: 태그의 부모-자식 관계를 고려해 부모 태그 기준으로 자식 태그를 지정하여 선택(">" 사용)한다.

div > span { font-size: 20px; }

전체 선택자: "*" 기호를 이용해 해당 html 문서 전체에 스타일을 적용한다.

* {
  margin: 0;
  padding: 0;
}

1-5) CSS 주요 속성

CSS에서 주로 사용되는 속성 중 대표적인 속성들만 정리하였다.

CSS가 연결된 HTML은 아래와 같다.

 <body>
    <div class="class">안녕</div>
    <div class="class">안녕하세요</div>
  </body>

1-5-1) background-color: 선택된 영역에 배경색을 넣어줌

.class {
  background-color: darkolivegreen;
}

1-5-2) width / height: 영역의 넓이(width)와 높이(height)를 지정해 줌

 .class {
  background-color: darkolivegreen;
  width: 100px;
  height: 100px;
}

1-5-3) font-size: 텍스트 크기를 변경해 줌

.class {
  background-color: darkolivegreen;
  width: 100px;
  height: 100px;
  font-size: 30px;
}

1-5-4) margin: 해당 선택자 영역 기준으로 외부에 여백을 만들어 줌

.class {
  background-color: darkolivegreen;
  width: 100px;
  height: 100px;
  font-size: 30px;
  margin: 20px;
}

각 방향에 margin을 따로따로 지정해 줄 수도 있음

margin : 20px 20px 20px 20px;
margin-top : 20px;
margin-bottom : 20px;
margin-right : 20px;
margin-left : 20px;

상하와 좌우를 묶어서 지정해 줄 수도 있음

margin : 20px 0;
이 경우는 영역의 위아래에 20px의 margin을 부여하고 좌우에는 margin을 부여하지 않음

1-5-5) padding: 해당 선택자 영역 기준으로 내부에 공간을 부여해 줌

단, 부여한 공간만큼 기존 전체 영역의 크기가 커짐!!

콘텐츠의 위치를 변경하기 위해 사용됨

.class {
  background-color: darkolivegreen;
  width: 100px;
  height: 100px;
  font-size: 30px;
  margin: 20px;
  padding: 10px;
}

padding 사용 시 기존보다 영역이 더 커지는 현상 때문에

이전에는 전체 영역의 width와 height에서 지정한 padding의 크기 만큼을 빼줬어야 했는데,

box-sizing이 생긴 이후로 그런 번거로움이 사라짐!!

.class {
  background-color: darkolivegreen;
  width: 100px;
  height: 100px;
  font-size: 30px;
  margin: 20px;
  padding: 10px;
  box-sizing: border-box;
}

"box-sizing: border-box;"를 이용하면

padding과 border를 포함한 크기를

width와 height로 설정해 줌!!

1-6) block, inline, inline-block

display 속성에서 사용할 수 있는 속성 중

block, inline, inline-block에 대해 알아보자.

1-6-1) block

block은 한 줄을 모두 차지하는 박스 형태를 가진다.

그렇기 때문에 기본적으로 width는 100%로 설정된다.

width와 height를 따로 지정할 수 있으며,

margin과 padding 또한 지정할 수 있다.

width를 지정해도 해당 줄의 남은 영역을 모두 차지한다.

(매우 중요!!) display 속성이 “block” 속성이라는 것은 한 줄을 다 차지하는 것을 의미하며,

이는 style의 width, height 속성과는 무관하다!!

>> 따라서 width, height의 크기와 관계없이 block으로 display 속성을 지정한 경우에는

웹 브라우저 화면 상 옆에 공간이 남아있어 보여도 한 줄을 다 차지하고 있다고 보면 됨

1-6-2) inline

inline은 기본적으로 해당 콘텐츠 만큼의 영역만 차지한다.

그러므로 width, height, margin, padding을 지정할 수 없다!!

1-6-3) inline-block

inline-block 속성은 block 속성과 inline 속성의 장점을 섞어놓은 것 같다.

width, height, margin, padding을 지정할 수 있지만,

지정하지 않으면, inline처럼 콘텐츠가 존재하는 영역만 차지한다.

inline과 block의 유용한 속성( >> block 속성(width, height, margin, padding 조절 가능) /

inline 속성(크기 조절은 안 되지만 옆에 공간이 남아있으면 다음 태그의 콘텐츠가 와서 붙도록 할 수 있음) )만

뽑아서 사용할 수 있는 display 속성이 “inline-block” 속성임!!

+) 하위 태그 생성

태그 간의 부모-자식 관계를 형성할 수 있음.

부모 또는 상위 태그에 포함되어 있는 태그를

자식 또는 하위 태그라고 부름.

<div class = "부모">
    <div class = "자식">
    </div>
</div>

부모 태그를 이용해 자식 태그를 선택할 시 " > "를 사용함.

.부모 > .자식 {
  ...
}

+) margin: 0 auto;

영역을 가운데 정렬시켜주는 코드
위의 코드는 웹 페이지 창의 크기를 늘리고 줄임에 따라 자동적으로 양 옆의 margin의 크기가 변화하면서 해당 contents 영역을 가운데로 오게 함
즉, 해당 element 영역의 width를 기준으로 margin의 크기를 변화시키므로 반드시 위의 속성을 지정해줄 element에 대해 width의 크기를 지정해줘야 함!!

2) 연습 코드

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>경일게임아카데미</title>
    <link rel="stylesheet" type="text/css" href="./public/css/index.css" />
  </head>
  <body>
    <div id="header">
      <h1>
        <img src="./public/images/logo.png" />
      </h1>
      <ul>
        <li>학원소개</li>
        <li>교육과정</li>
        <li>취업정보</li>
        <li>커뮤니티</li>
        <li>상담신청</li>
      </ul>
    </div>
    <div id="visual">visual</div>
    <div id="contents">contents</div>
    <div id="footer">footer</div>
  </body>
</html>

index.css

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

#header {
  height: 100px;
  padding: 20px 0 20px 0;
  /* padding-top: 20px; */
  box-sizing: border-box;
}

#header > h1 {
  float: left;
}

#header > ul {
  margin: 20px 0 0 0;
  width: 1000px;
  float: right;
  /* display: inline-block; */
}

#header > ul > li {
  float: left;
  padding: 0 40px 0 40px;
}

#visual {
  height: 500px;
  background: blue;
}

#contents {
  height: 920px;
  background: yellow;
}

#footer {
  height: 170px;
  background: silver;
}

※ footer는 위의 태그들이 크기가 커서 길게 늘어진 관계로 웹 브라우저 상에 한 번에 안 보여서 생략함!!

※ float 속성: (1) 강제로 이동시킴(left / right 방향) (2) inline-block 속성이 들어감 (3) 하위 태그를 강제로 끌어올림

test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>naver 회원가입</title>
    <link rel="stylesheet" href="./public/css/test.css" type="text/css" />
  </head>
  <body>
    <div id="wrap">
      <!-- start header -->
      <div id="header_wrap">
        <div id="header" class="container">
          <h1>
            <a href="http://naver.com" class="top_logo"></a>
          </h1>
        </div>
      </div>
      <!-- end header -->

      <!-- start contents -->
      <div id="contents_wrap">
        <div id="contents" class="container">
          <div id="login">
            <div id="id_row">
              <h3 id="id">
                <label for="id">아이디</label>
              </h3>
              <span class="form">
                <input type="text" id="id" />
                <span class="url">@naver.com</span>
              </span>
            </div>

            <div id="pwd_row">
              <h3 id="pwd">
                <label for="pwd">비밀번호</label>
              </h3>
              <span class="form">
                <input type="password" id="pwd" />
                <a href="#" class="lock"></a>
              </span>
            </div>

            <div id="pwd2_row">
              <h3 id="pwd2">
                <label for="pwd2">비밀번호 재확인</label>
              </h3>
              <span class="form">
                <input type="password" id="pwd2" />
                <a href="#" class="lock"></a>
              </span>
            </div>
          </div>

          <div id="info">
            <div id="name_row">
              <h3 id="name">
                <label for="name">이름</label>
              </h3>
              <span class="form">
                <input type="text" id="name" />
              </span>
            </div>

            <div id="birth_row">
              <h3 id="birth">
                <label for="birth">생년월일</label>
              </h3>
              <span class="form">
                <span class="year">
                  <input
                    type="text"
                    id="year"
                    placeholder="년(4자)"
                    maxlength="4"
                  />
                </span>
                <span class="month">
                  <select name="month" id="month" aria-level="월">
                    <option value="0">월</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                  </select>
                </span>
                <span class="day">
                  <input type="text" id="day" placeholder="일" maxlength="2" />
                </span>
              </span>
            </div>

            <div id="gender_row">
              <h3 id="gender">
                <label for="gender">성별</label>
              </h3>
              <span class="form">
                <select name="gender" id="gender" aria-level="성별">
                  <option value="0">성별</option>
                  <option value="1">남자</option>
                  <option value="2">여자</option>
                  <option value="3">선택 안 함</option>
                </select>
              </span>
            </div>

            <div id="check_row">
              <h3 id="check">
                <label for="check">본인 확인 이메일</label>
                <label class="select" for="check">(선택)</label>
              </h3>
              <span class="form">
                <input type="text" id="check" placeholder="선택입력" />
              </span>
            </div>

            <div id="phone_row">
              <div id="phone_con">
                <h3 id="phone_con">
                  <label for="phone_con">휴대전화</label>
                </h3>
                <span class="form">
                  <select name="phone" id="phone" aria-level="대한민국 +82">
                    <option value="0">대한민국 +82</option>
                    <option value="1">덴마크 +45</option>
                    <option value="2">뉴질랜드 +64</option>
                    <option value="3">노르웨이 +47</option>
                  </select>
                </span>
              </div>
              <div id="phone_input">
                <span class="form">
                  <input
                    type="text"
                    id="phone_input"
                    placeholder="전화번호 입력"
                  />
                </span>
                <a href="#">
                  <span>인증번호 받기</span>
                </a>
              </div>
              <div id="phone_auth">
                <span class="form">
                  <input
                    type="text"
                    id="phone_auth"
                    placeholder="인증번호 입력하세요"
                  />
                </span>
              </div>
              <div id="enter">
                <a href="#">
                  <span>가입하기</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end contents -->

      <!-- start footer -->
      <div id="footer_wrap">
        <div id="footer">
          <div id="first_menu">
            <ul>
              <li>
                <a href="#">이용약관</a>
              </li>
              <li>
                <span>|</span>
              </li>
              <li>
                <a href="#" class="bold">개인정보처리방침</a>
              </li>
              <li>
                <span>|</span>
              </li>
              <li>
                <a href="#">책임의 한계와 법적고지</a>
              </li>
              <li>
                <span>|</span>
              </li>
              <li>
                <a href="#">회원정보 고객센터</a>
              </li>
            </ul>
          </div>
          <div id="second_menu">
            <ul>
              <li>
                <a href="http://naver.com" class="bottom_logo"></a>
              </li>
              <li>
                <span>Copyright</span>
              </li>
              <li>
                <a href="http://naver.com">NAVER Corp.</a>
              </li>
              <li>
                <span>All Rights Reserved.</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- end footer -->
    </div>
  </body>
</html>

test.css

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

#wrap {
  width: 100%;
  background: #f7f7f7;
}

#header_wrap {
  width: 100%;
}

#header {
  height: 124px;
}

#header > h1 {
  padding: 60px 0 20px 90px;
  box-sizing: border-box;
}

#header > h1 > .top_logo {
  display: inline-block;
  width: 300px;
  height: 100px;
  background: url(https://static.nid.naver.com/images/ui/join/m_naver_logo_20191126.png)
    10px -100px no-repeat;
}

/* 이미 위에서 width와 height를 지정하였기에 바로 밑의 코드와 같이 span 태그에 택스트를 굳이 입력할 필요가 없음 */
/* #header > h1 > .top_logo > .blind {
  display: none;
} */

#contents_wrap {
  width: 100%;
}

#contents {
  height: 1006px;
  /* background: blue; */
}

#contents > #login > #id_row {
  margin: 20px 0 0 0;
}

#contents > #login > #id_row > .form {
  width: 460px;
  height: 51px;
  line-height: 51px;
  border: 1px solid #dadada;
  box-sizing: border-box;
  margin: 8px 0 0 0;
  display: inline-block;
  background: #ffffff;
}

#contents > #login > #id_row > .form > input {
  width: 334px;
  height: 29px;
  margin: 0 25px 0 0;
  border: none;
}

#contents > #login > #id_row > .form > .url {
  color: #8e8e8e;
  font-size: 15px;
}

#contents > #login > #pwd_row {
  margin-top: 19px;
}

#contents > #login > #pwd_row > .form {
  width: 460px;
  height: 51px;
  border: 1px solid #dadada;
  box-sizing: border-box;
  margin: 8px 0 0 0;
  padding: 10px 0;
  box-sizing: border-box;
  display: inline-block;
  background: #ffffff;
}

#contents > #login > #pwd_row > .form > input {
  float: left;
  width: 404px;
  height: 29px;
  margin: 0 25px 0 0;
  border: none;
}

#contents > #login > #pwd_row > .form > a {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url(https://static.nid.naver.com/images/ui/join/m_icon_pw_step.png) -2px
    2px no-repeat;
  background-size: 125px 75px;
}

#contents > #login > #pwd2_row {
  margin-top: 19px;
}

#contents > #login > #pwd2_row > .form {
  width: 460px;
  height: 51px;
  border: 1px solid #dadada;
  box-sizing: border-box;
  margin: 8px 0 0 0;
  padding: 10px 0;
  box-sizing: border-box;
  display: inline-block;
  background: #ffffff;
}

#contents > #login > #pwd2_row > .form > input {
  float: left;
  width: 404px;
  height: 29px;
  margin: 0 25px 0 0;
  border: none;
}

#contents > #login > #pwd2_row > .form > a {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url(https://static.nid.naver.com/images/ui/join/m_icon_pw_step.png) -2px
    2px no-repeat;
  background-size: 125px 75px;
}

#contents > #info > #name_row {
  margin: 30px 0 0 0;
}

#contents > #info > #name_row > .form {
  width: 460px;
  height: 51px;
  line-height: 51px;
  border: 1px solid #dadada;
  box-sizing: border-box;
  margin: 8px 0 0 0;
  display: inline-block;
  background: #ffffff;
}

#contents > #info > #name_row > .form > input {
  width: 458px;
  height: 29px;
  margin: 0 25px 0 0;
  border: none;
}

#contents > #info > #birth_row {
  margin: 19px 0 0 0;
}

#contents > #info > #birth_row > h3 {
  margin-bottom: 15px;
}

#contents > #info > #birth_row > .form > .year {
  width: 140.69px;
  height: 51px;
  margin: 0 10px 0 0;
  padding: 11px 14px;
  box-sizing: border-box;
  border: 1px solid #dadada;
  background: #ffffff;
}

#contents > #info > #birth_row > .form > .year > #year {
  width: 116.69px;
  height: 29px;
  padding: 0 25px 0 0;
  box-sizing: border-box;
  border: none;
}

#contents > #info > #birth_row > .form > .month {
  width: 140.61px;
  height: 51px;
  margin: 0 10px 0 0;
  padding: 11px 14px;
  box-sizing: border-box;
  border: 1px solid #dadada;
  background: #ffffff;
}

#contents > #info > #birth_row > .form > .month > #month {
  width: 116.61px;
  height: 29px;
  box-sizing: border-box;
  border: none;
}

#contents > #info > #birth_row > .form > .day {
  width: 116.7px;
  height: 51px;
  padding: 11px 14px;
  box-sizing: border-box;
  border: 1px solid #dadada;
  background: #ffffff;
}

#contents > #info > #birth_row > .form > .day > #day {
  width: 108px;
  height: 29px;
  padding: 0 25px 0 0;
  box-sizing: border-box;
  border: none;
}

#contents > #info > #gender_row {
  margin: 25px 0 0 0;
}

#contents > #info > #gender_row > .form {
  width: 460px;
  height: 51px;
  line-height: 51px;
  border: 1px solid #dadada;
  box-sizing: border-box;
  margin: 8px 0 0 0;
  display: inline-block;
  background: #ffffff;
}

#contents > #info > #gender_row > .form > #gender {
  width: 440px;
  height: 29px;
  margin: 0 25px 0 10px;
  border: none;
}

#contents > #info > #check_row {
  margin: 19px 0 0 0;
}

#contents > #info > #check_row > h3 > .select {
  color: #8e8e8e;
  font-size: 12px;
}

#contents > #info > #check_row > .form {
  width: 460px;
  height: 51px;
  line-height: 51px;
  border: 1px solid #dadada;
  box-sizing: border-box;
  margin: 8px 0 0 0;
  display: inline-block;
  background: #ffffff;
}

#contents > #info > #check_row > .form > input {
  width: 440px;
  height: 29px;
  margin: 0 25px 0 10px;
  border: none;
}

#contents > #info > #phone_row {
  margin: 30px 0 0 0;
}

#contents > #info > #phone_row > #phone_con > .form {
  width: 460px;
  height: 51px;
  line-height: 51px;
  border: 1px solid #dadada;
  box-sizing: border-box;
  margin: 8px 0 0 0;
  display: inline-block;
  background: #ffffff;
}

#contents > #info > #phone_row > #phone_con > .form > #phone {
  width: 440px;
  height: 29px;
  margin: 0 25px 0 10px;
  border: none;
}

#contents > #info > #phone_row > #phone_input > .form {
  margin: 10px 0 0 0;
  float: left;
  width: 335px;
  height: 51px;
  line-height: 51px;
  border: 1px solid #dadada;
  box-sizing: border-box;
  background: #ffffff;
}

#contents > #info > #phone_row > #phone_input > .form > #phone_input {
  width: 304px;
  height: 29px;
  margin: 0 25px 0 10px;
  border: none;
}

#contents > #info > #phone_row > #phone_input > a {
  text-decoration: none;
  float: left;
  margin: 10px 0 0 13px;
}

#contents > #info > #phone_row > #phone_input > a > span {
  width: 110px;
  height: 51px;
  line-height: 51px;
  font-weight: bold;
  color: #fff;
  border: solid 1px rgba(0, 0, 0, 0.08);
  background-color: #03c75a;
  float: left;
  padding: 0 0 0 10px;
  box-sizing: border-box;
}

#contents > #info > #phone_row > #phone_auth {
  margin: 10px 0 0 0;
  float: left;
}

#contents > #info > #phone_row > #phone_auth > .form {
  width: 460px;
  height: 51px;
  line-height: 51px;
  border: 1px solid #dadada;
  box-sizing: border-box;
  display: inline-block;
  background: #f7f7f7;
}

#contents > #info > #phone_row > #phone_auth > .form > input {
  width: 430px;
  height: 29px;
  margin: 0 20px 0 10px;
  border: none;
  background: #f7f7f7;
}

#contents > #info > #phone_row > #enter {
  float: left;
  margin: 32px 0 0 0;
}

#contents > #info > #phone_row > #enter > a {
  width: 458px;
  height: 51px;
  line-height: 51px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border: solid 1px rgba(0, 0, 0, 0.08);
  background-color: #03c75a;
  float: left;
}

#footer_wrap {
  width: 100%;
}

#footer {
  width: 768px;
  height: 100px;
  margin: 0 auto;
}

#footer > #first_menu > ul {
  padding: 30px 0 15px 185px;
  box-sizing: border-box;
}

#footer > #first_menu > ul > li > a {
  float: left;
  font-size: 12px;
  color: black;
  text-decoration: none;
  margin: 5px;
  box-sizing: border-box;
}

#footer > #first_menu > ul > li > .bold {
  font-weight: bold;
}

#footer > #first_menu > ul > li > span {
  float: left;
  margin: 5px;
  font-size: 12px;
  color: black;
  font-weight: lighter;
}

#footer > #second_menu {
  width: 330px;
  height: 20px;
  float: left;
  margin: 8px 0 0 230px;
}

#footer > #second_menu > ul > li {
  float: left;
  padding: 0 2px;
  box-sizing: border-box;
  font-size: 12px;
  color: black;
}

#footer > #second_menu > ul > li > a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

#footer > #second_menu > ul > li > .bottom_logo {
  float: left;
  width: 70px;
  height: 16px;
  background: url(https://static.nid.naver.com/images/ui/login/pc_sp_login_190522.png) -242px
    0 no-repeat;
  background-size: 460px auto;
}

/* etc */
.container {
  width: 460px;
  margin: 0 auto;
}

※ 네이버 회원가입 폼의 경우, 한 화면에 모든 영역이 담기지 않아 구현 결과를 나눠서 첨부함!!

저작자표시

'HTML & CSS > HTML & CSS(2022 version)' 카테고리의 다른 글

HTML & CSS 실습 및 추가 skill (0)	2022.10.25
CSS 복습(2) - 위치 조절 방법 및 기타 사항 (0)	2022.10.24
HTML 복습 - 개념 및 기본 문법, 자주 쓰이는 태그/속성 (0)	2022.10.20
HTML & CSS 실습(2) - 레이아웃 체크 및 코드 리뷰 (0)	2022.10.17
HTML & CSS 실습 - 추가 속성 체크 및 실습 (0)	2022.10.14

CodeTraveler

CSS 복습 - 적용 방법 및 선택자, 주요 속성

<목차>

'HTML & CSS > HTML & CSS(2022 version)' 카테고리의 다른 글

티스토리툴바

CSS 복습 - 적용 방법 및 선택자, 주요 속성

<목차>

'HTML & CSS > HTML & CSS(2022 version)' 카테고리의 다른 글

'HTML & CSS/HTML & CSS(2022 version)' Related Articles

티스토리툴바