CSS & HTML 기초(1)

min_chan·2024년 3월 14일

CSS & HTML

목록 보기

1/10

1. HTML 기본 태그

<!-- 현재 html 문서의 버전이 html5임을 브라우저에게 알려줌 -->
<!DOCTYPE html>
<!-- 현재 문서의 주 언어 명시 -->
<html lang="ko">
  <head>
    <!-- 현재 파일의 형식이 유니코드(다국어)임을 나타냄 -->
    <meta charset="UTF-8" />
    <!-- viewport: 브라우저 크기 -->
    <!-- content="width=device-width: 모바일 디바이스의 크기만큼 브라우저 크기를 설정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- title: 사이트명 -->
    <title>Document</title>
  </head>
  <!--  -->
  <body>
    <!-- 의미는 없지만 감싸야 될 때 쓰는 태그 -->
    <!-- id는 바깥 부분(header, main, footer), class는 내부 부분 -->
    <div id="wrap">
      <!-- 헤더 -->
      <header id="header">
        <!-- logo: h1 -->
        <h1 class="logo">logo h1</h1>
        <!-- 섹션 제목에 주로 사용 -->
        <h2>작은 제목</h2>
        <!-- 컬럼 제목에 주로 사용 -->
        <h3>컬럼 제목</h3>
        <!-- 네비게이션: 주메뉴 감쌀 때만 사용 -->
        <nav class="gnb_wrap">
          <!-- ul: 순서가 중요하지 않은 일반적인 리스트 -->
          <ul class="gnb">
            <!-- 스타일이 같으면 리스트다 -->
            <li>menu1</li>
            <li>menu1</li>
            <li>menu1</li>
            <li>menu1</li>
            <li>menu1</li>
          </ul>
        </nav>
      </header>
      <!-- main -->
      <main id="container">
        <section class="main_etc">
          <h2>섹션에는 반드시 하나이상의 제목 태그가 필요</h2>
          <!-- ol: 순서가 필요한 목록 -->
          <ol>
            <li>facebook link</li>
            <li>google link</li>
            <li>naver link</li>
          </ol>
          <!-- 제목이 포함된 리스트 구조에 주로 사용 -->
          <dl>
            <dt>카테고리 제목</dt>
            <dd>카테고리1</dd>
            <dd>카테고리2</dd>
            <dd>카테고리3</dd>
          </dl>
        </section>
      </main>
      <!-- footer -->
      <footer id="footer">
        <!-- p: 문단 -->
        <p>
          <!-- br태그는 self closing 태그 -->
          <!-- strong태그: 강조, em태그 italic체 -->
          <!-- span태그는 인라인 요소(<span>, <a>, <img>, <em>, <strong> 등)를 그룹시킬 때 쓸 수 있으며 글자를 감을때도 사용 -->
          <strong>"ignore"</strong>가 적용되지 않는 이유는 .gitignore 파일에서
          사용하는 패턴이 올바르지 않기 때문일 수 있습니다.<br />
          .gitignore 파일은 특정 파일이나 디렉토리를 Git에서 추적하지 않도록
          지정하는 데 사용됩니다.<br />
          예를 들어, <em>.html</em>과 <span>.css</span>와 같은 패턴은 확장자가
          .html 또는 .css인 모든 파일을 무시하도록 지정합니다. 하지만 특정
          파일이나 디렉토리가 제대로 무시되지 않는다면, .gitignore 파일에서
          사용하는 패턴을 확인해 보십시오. 올바른 패턴을 사용하는지 확인하여
          무시되지 않는 파일이 있는지 확인할 수 있습니다.
        </p>
        <p>
          <!-- b태그 bold체 -->
          <!-- u태그 언더라인 -->
          <!-- i태그 이탤릭 -->
          <b>para</b
paraparaparaparaaraparaparaparap<br />araparaparapara<u>paraparap</u>paraparaparaparaparaparapara<i>paraparap</i>ara
        </p>
        <address>my address kkamsd-122kmkl</address>
      </footer>
    </div>
  </body>
</html>

2. 절대 경로 설정

main.html

<!-- 현재 html 문서의 버전이 html5임을 브라우저에게 알려줌 -->
<!DOCTYPE html>
<!-- 현재 문서의 주 언어 명시 -->
<html lang="ko">
  <head>
    <!-- 현재 파일의 형식이 유니코드(다국어)임을 나타냄 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>03</title>
  </head>
  <body>
    <!-- id는 바깥 부분(header, main, footer), class는 내부 부분 -->
    <div id="wrap">
      <header id="header">
        <h1 class="logo">
          <a href="index.html">
            <img src="./images/logo_w.png" alt="subway" />
          </a>
          <!-- 같은 화면에서 id가 있는곳으로 전환 -->
        </h1>
        <nav class="gnb_wrap">
          <ul class="gnb">
            <li><a href="index2.html">go sub page</a></li>
          </ul>
        </nav>
        <!-- 절대 주소: 다른 사이트를 새창으로 띄울 때 : target="_blank"-->
        <!-- title: 툴팁 메시지 보여줌(설명 차원, 접근성) -->
        <!-- 새창 띄울 시 아래 형식 고정 -->
        <a href="http://naver.com" target="_blank" title="새창 열림">naver</a>
        <br />
        <a href="#container">메인컨텐츠로 이동</a>
        <br />
        <a href="#footer">footer이동</a>
      </header>
      <main id="container" style="height: 1500px; border: 10px solid red">
        <!-- &amp; : &기호 오류 방지 -->
        메인&amp; 컨텐츠
      </main>
      <!-- &nbsp: 띄어쓰기 -->
      <!-- &lt ~ &gt : < > -->
      <footer id="footer">foo&nbsp;&nbsp;&nbsp;&nbsp;ter&lt;asd&gt;</footer>
    </div>
  </body>
</html>

sub.html

<!-- 현재 html 문서의 버전이 html5임을 브라우저에게 알려줌 -->
<!DOCTYPE html>
<!-- 현재 문서의 주 언어 명시 -->
<html lang="ko">
  <head>
    <!-- 현재 파일의 형식이 유니코드(다국어)임을 나타냄 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>03</title>
  </head>
  <body>
    <!-- id는 바깥 부분(header, main, footer), class는 내부 부분 -->
    <div id="wrap">
      <header id="header">
        <h1 class="logo">
          <a href="index.html">
            <img src="./images/logo_w.png" alt="subway" />
          </a>
        </h1>
      </header>
      <main id="container">subpage</main>
    </div>
  </body>
</html>

3. CSS 적용하기

main.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>스타일 적용하기</title>
    <link rel="stylesheet" href="common.css" />
    <style>
      /* #: id선택자 */
      /* .: class선택자  */
      /* #header .logo -> id 헤더안의 클래스인 로고 */
      /* 내부 스타일: 한페이지에만 빠르게 적용가능 */
      #header .logo {
        border: 5px solid black;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <!-- 인라인 스타일: 이메일 코딩처럼 파일연결이 불가능한 경우 사용 -->
      <header id="header" style="border: 5px solid red">
        <h1 class="logo">
          <a href="index.html">
            <img src="./images/logo_w.png" alt="subway" />
          </a>
        </h1>
        <p class="txt">외부 스타일 적용하기</p>
      </header>
    </div>
  </body>
</html>

common.css

#header {
  width: 1000px;
  /* %단위는 부모의 크기가 기준 */
  width: 50%;
  height: 700px;
}

/* 클릭 요소에 탭키로 포커스 이동 시 외곽선이 생기며(키보드 접근성) 끌 수 있음 */
#header .logo a {
  outline: none;
}

#header .txt {
  font-size: 50px;
  /* 축약형 */
  /* border: 5px solid red; */
  /* 개별 속성 */
  /* border-top: none; */
  /* border-bottom: 10px dashed blue; */

  /* 값을 생략할 수 있지만 안되는 경우도 있으므로 생략하지말기 */
  /* 색은 16진수 헥사코드 사용 */
  /* 두자리가 같을 경우 한자리로 표현 가능 */
  border-bottom: 10px solid #00f;
  /* %를 의미하는 경우 소수 두자리 가능 */
  border-top: 10px solid rgba(0, 0, 0, 0.55);
}

4. CSS 선택자 우선 순위

main.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css선택자</title>
    <link rel="stylesheet" href="common.css" />
  </head>
  <body>
    <div id="wrap">
      <!-- id는 동일한 이름을 사용할 수 없음 -->
      <header id="header">
        <!-- h태그에는 기본적으로 상하 마진이 들어가 있네 -->
        <!-- 인라인 스타일:1000점 -->
        <h1 class="logo" style="border: 20px solid yellowgreen">
          <a href="index.html">
            <img src="./images/logo_w.png" alt="subway" />
          </a>
        </h1>
        <nav class="gnb_wrap">
          <ul class="gnb">
            <li>
              <a href="#">주메뉴1</a>
              <ul class="depth2">
                <li><a href="#">서브메뉴</a></li>
                <li><a href="#">서브메뉴</a></li>
                <li><a href="#">서브메뉴</a></li>
                <li><a href="#">서브메뉴</a></li>
              </ul>
            </li>
            <li>
              <a href="#">주메뉴1</a>
              <ul class="depth2">
                <li><a href="#">서브메뉴</a></li>
                <li><a href="#">서브메뉴</a></li>
                <li><a href="#">서브메뉴</a></li>
                <li><a href="#">서브메뉴</a></li>
              </ul>
            </li>
            <li>
              <a href="#">주메뉴1</a>
              <ul class="depth2">
                <li><a href="#">서브메뉴</a></li>
                <li><a href="#">서브메뉴</a></li>
                <li><a href="#">서브메뉴</a></li>
                <li><a href="#">서브메뉴</a></li>
              </ul>
            </li>
          </ul>
        </nav>
        <h2>작은제목</h2>
        <h3>작은제목</h3>
        <h4>작은제목</h4>
        <h5>작은제목</h5>

        <input type="checkbox" />
        <label>min_chan</label>
      </header>
    </div>
  </body>
</html>

common.css

/* *: 전체 선택자 */
* {
  /* 바깥 여백 */
  margin: 0;
  /* 안쪽 여백 */
  padding: 0;
}

/* 동시 선택자 */
h2,
h3,
h4,
h5 {
  font-size: 30px;
  color: red;
}

/* 아이디 선택자: 100점 */
#header {
  width: 1200px;
  height: 150px;
  border: 5px solid red;
}

/* 하위 선택자 */
/* 110점이므로 위에 있더라도 우선순위가 높아진다. */
/* !important키워드를 붙이면 10000점, 인라인 스타일을 덮어 씌울때만 사용 */
#header .logo {
  border: 3px solid black !important;
}

/* 클래스 선택자 10점 */
/* .logo {
  border: 3px solid yellowgreen;
} */

/* 자식 선택자: 부모의 직계 자식만 선택가능(>) */
/* 이중 리스트 구조에서 바깥쪽 li와 a는 반드시 자식 선택자 사용해야함 */
#header .gnb > li {
  border: 1px solid red;
}

/* li의 자식인 a 사용 */
#header .gnb > li > a {
  background: yellowgreen;
}

#header .gnb .depth2 li {
  border: 2px solid black;
}

/* 태그 선택자 1점, 속성 선택자: 폼 요소 선택 시 사용 */
/* +: 인접형제 선택자 */
/* input[type='checkbox']에 이어져 나오는 label을 선택 */
input[type='checkbox'] + label {
  color: red;
}

6. 가상 클래스,요소 선택자

main.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가상선택자</title>
    <link rel="stylesheet" href="common.css" />
  </head>
  <body>
    <div id="wrap">
      <header id="header">
        <!-- #: null link(임시 링크) -->
        <a href="#"> link </a>
        <ul class="list">
          <!-- box item1 -> 하나의 클래스에 box, item1 클래스 두개가 들어간다. -->
          <li class="box item1">list1</li>
          <li class="box item2">list2</li>
          <li class="box item3">list3</li>
          <li>list4</li>
          <li>list5</li>
          <li>list6</li>
          <li>list7</li>
        </ul>
      </header>
      <main id="container">
        <section class="main_etc">
          <h2>섹션 제목</h2>
        </section>
      </main>
    </div>
  </body>
</html>

common.css

/* *: 전체 선택자 */
* {
  /* 바깥 여백 */
  margin: 0;
  /* 안쪽 여백 */
  padding: 0;
}

/* link가 걸린 a를 의미 */
/* 가상 클래스 10점 */
/* 밑줄 빼기 */
/* a:link {
  color: red;

  text-decoration: none;
} */

/* 방문하고 왔을 경우 */
/* a:visited {
  color: grey;
} */

/* 마우스를 올렸을 경우 */
/* a:hover {
  text-decoration: underline;
} */

/* 클릭이 아니며 클릭 동작은 자스로 처리 */
/* a:active {
  color: blue;
} */

/* 일반 사이트에서 a초기화 */
a {
  text-decoration: none;
  color: #000;
}

#wrap {
  height: 1500px;
}

/* li:first-child -> li태그의 형제 요소 중 첫번째 요소만 선택 */
/* #header .list li:first-child {
  border: 1px solid blue;
} */

/* 형제 중 n번째 요소 선택 */
/* #header .list li:nth-child(3) {
  border: 3px solid blue;
} */

/* 형제 중 짝수 선택 */
/* #header .list li:nth-child(even) {
  border: 3px solid blue;
} */

/* 홀수  */
/* #header .list li:nth-child(odd) {
  border: 3px solid red;
} */

/* 1, 4, 7번째 선택 */
/* n은 0부터 시작, child는 1부터 */
/* #header .list li:nth-child(3n + 1) {
  border: 3px solid red;
} */

/*  */
/* #header .list li:last-child {
  border: 3px solid red;
} */

/* li:not(:last-child) -> li중 마지막 요소가 아닌 li선택 */
#header .list li:not(:last-child) {
  border: 3px solid blue;
}

/*  #header .list li[class^='item'] -> id 헤더의 class 리스트의 모든 자식인 li중 class이름에 item으로 시작하는 것만 */
/* #header .list li[class^='item'] {
  background: red;
} */

/* (*=) -> 클래스 이름에서 item이 들어가 있는 */
#header .list li[class*='item'] {
  background: red;
}

/* 같은 클래스에 포함된 두개의 클래스므로 붙여서 작성 */
#header .list .box.item2 {
  color: dodgerblue;
}

#header .list .box {
  color: #fff;
}

/* container id는 특별한 경우가 아니면 적지않음 */
.main_etc {
  border: 5px solid black;
  height: 400px;
}

.main_etc h2 {
  text-align: center;
  font-size: 80px;
  position: relative;
}

/* 가상요소 선택자: 꾸밀 때 사용 */
/* h2::before -> h2의 앞에 content추가 */
.main_etc h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  width: 100px;
  height: 5px;
  background: red;
}

7. 폰트

common.css

/* *: 전체 선택자 */
* {
  /* 바깥 여백 */
  margin: 0;
  /* 안쪽 여백 */
  padding: 0;
}

/* font축약형 사용금지!: font축약형은 숨겨진 여러 속성값이 있으므로 상속 성질이 있으므로 body에 주면 모두 적용*/
/* 시스템 폰트는 한글, 영문 모두 적어야함(맥에서는 한글 인식 불가) */
/* sans-serif: 고딕 */
/* 앞쪽의 폰트가 없을 경우 os별 기본 고딕체로 보여짐 */
/* 폼요소는 기본 폰트가 다르므로 따로 지정한다 */
body,
input,
textarea,
select,
button,
table {
  /* 시스템 폰트 */
  font-family: -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕',
    helvetica, 'Apple SD Gothic Neo', sans-serif;
  /* 본문 기본 크기 */
  font-size: 16px;
  /* 본문 기본 색상 */
  color: #666666;
}

#wrap {
  height: 1500px;
}

.main_etc {
  width: 1200px;
  height: 500px;
  border: 4px solid red;
  margin: 0 auto;
}

.main_etc h2 {
  font-size: 50px;
  /* 폰트 굵기는 숫자로만 지정, 폰트마다 모두 다름 */

  /* Regular */
  font-weight: 400;

  /* Medium */
  font-weight: 500;

  /* bold */
  font-weight: 700;

  /* black */
  font-weight: 900;
  font-weight: 400;
}

.main_etc p {
  font-style: italic;
  color: red;
}

8. 텍스트

common.css

/* *: 전체 선택자 */
* {
  /* 바깥 여백 */
  margin: 0;
  /* 안쪽 여백 */
  padding: 0;

  /* padding ,border를 크기 안쪽으로 포함한다. */
  box-sizing: border-box;
}

/* font축약형 사용금지!: font축약형은 숨겨진 여러 속성값이 있으므로 상속 성질이 있으므로 body에 주면 모두 적용*/
/* 시스템 폰트는 한글, 영문 모두 적어야함(맥에서는 한글 인식 불가) */
/* sans-serif: 고딕 */
/* 앞쪽의 폰트가 없을 경우 os별 기본 고딕체로 보여짐 */
/* 폼요소는 기본 폰트가 다르므로 따로 지정한다 */
body,
input,
textarea,
select,
button,
table {
  /* 시스템 폰트 */
  font-family: -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕',
    helvetica, 'Apple SD Gothic Neo', sans-serif;
  /* 본문 기본 크기 */
  font-size: 16px;
  /* 본문 기본 색상 */
  color: #333333;
  /* 본문 줄 간격 */
  line-height: 1.5;
  /* 모바일 디자인에서 영문이 많을 경우 영문을 한글자씩 줄바꿈 */
  word-break: break-all;
}

#wrap {
  height: 1500px;
}

.main_etc {
  /* width: 1200px; */
  height: 500px;
  border: 4px solid red;
  margin: 0 auto;
}

.main_etc h2 {
  /* 한글을 한단어씩 줄바꿈 (큰 제목에 사용함) */
  /* break-word & keep-all 같이 사용 */
  word-break: keep-all;
  /* 단어의 길이가 부모 가로보다 길 경우 한글자씩 내려감 */
  word-wrap: break-word;
  text-align: center;
  font-size: 50px;
  /* 밑줄은 폰트를 따라 적용되며 위치 변경 불가 */
  text-decoration: underline;

  /* 1em : 폰트 크기만큼 벌어진다 */
  /* letter-spacing -> 자간 반드시 em단위로 사용하자 */
  /* fifma에서 -5% -> 0.05em이다 */
  letter-spacing: -0.1em;
}

.main_etc .link_wrap {
  /* 글자 취급요소(인라인, 인라인 블럭) 가운데 정렬 */
  text-align: center;
}

.main_etc .link_wrap a {
  border: 1px solid black;
  display: inline-block;
  /* 좌우로 배치된 인라인 요소의 높이가 다를경우 요소끼리의 수직정렬 */
  vertical-align: middle;
}

.main_etc p {
  /* line-height: 2em; */
  /* 줄 간격 em생략 가능 */
  line-height: 2;
  font-size: 30px;
  /* word-break: break-all; */
}

.main_etc .link_wrap a:nth-child(2) {
  height: 100px;
}

.main_etc .link_wrap a:nth-child(3) {
  height: 80px;
}

.main_etc .button {
  /* 기본 값 */
  /* box-sizing: content-box; */

  display: inline-block;
  width: 100px;
  height: 50px;
  /* padding: 0 20px; */
  border: 10px solid blue;
  /* height: 30px;
  text-align: left; */
  /* 텍스트 좌우 이동 음,양수 가능 */
  text-indent: -20px;
}

min_chan

github.com/kangminchan99

다음 포스트

CSS & HTML 기초(1)

CSS & HTML

1. HTML 기본 태그

2. 절대 경로 설정

3. CSS 적용하기

4. CSS 선택자 우선 순위

6. 가상 클래스,요소 선택자

7. 폰트

8. 텍스트

CSS & HTML 기초(2)

0개의 댓글