직접 제작한 그림, 사진이 아닐 경우 출처를 링크로 첨부합니다.
해당 그림, 사진을 클릭해서 확인하세요.

HTML

HTML 블록(block)과 인라인(inline) 요소

블럭요소(block element)와 인라인요소(inline element)란?

  • 블럭요소 : 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소
    • ex <div>,<table>,<h1>~<h6>,<p>,<form>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<pre>,<blockquote>
  • 인라인요소 : 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소
    • 행 안의 일부분이라고 보시면 됨
    • 텍스트레벨 요소라고도 부른다.
    • ex) <span>,<a>,<br>,<em>,<strong>,<input>,<label>,<img>

<div>: 이 태그는 문서의 영역을 나누거나 그룹화하는 데 사용됩니다. 주로 CSS 스타일링이나 스크립트 적용을 위해 사용됩니다.

<table>: 이 태그는 표를 생성하는 데 사용됩니다. <tr> 태그를 사용하여 행을, <td> 태그를 사용하여 셀을 생성하며, <th> 태그를 사용하여 테이블의 헤더 셀을 생성합니다.

<h1>~<h6>: 이 태그들은 제목 요소를 나타내며, <h1>이 가장 높은 수준의 제목을 나타내고 <h6>이 가장 낮은 수준의 제목을 나타냅니다. 보통 제목의 계층 구조를 나타내는 데 사용됩니다.

<p>: 이 태그는 단락을 나타냅니다. 일반적으로 텍스트 블록을 단락으로 그룹화할 때 사용됩니다.

<form>: 이 태그는 사용자 입력을 받기 위한 양식을 생성하는 데 사용됩니다. <input>과 같은 입력 요소들과 함께 사용되며, 서버로 데이터를 전송하거나 클라이언트 측에서 스크립트로 처리할 수 있습니다.

<ul>: 이 태그는 정렬되지 않은 목록을 생성하는 데 사용됩니다. <li> 태그로 각 항목을 생성하며, 항목들은 순서 없이 나열됩니다.

<ol>: 이 태그는 정렬된 목록을 생성하는 데 사용됩니다. <li> 태그로 각 항목을 생성하며, 항목들은 순서대로 번호가 매겨집니다.

<li>: 이 태그는 목록의 항목을 나타냅니다. <ul>이나 <ol>과 함께 사용되며, 각 항목을 나타냅니다.

<dl>, <dt>, <dd>: 이 태그들은 정의 목록을 생성하는 데 사용됩니다. <dl>은 정의 목록을 감싸고, <dt>는 용어를 정의하고, <dd>는 용어에 대한 설명을 제공합니다.

<pre>: 이 태그는 서식이 있는 텍스트를 나타냅니다. 보통 코드 조각이나 서식있는 텍스트를 표시할 때 사용됩니다.

<blockquote>: 이 태그는 인용문을 나타냅니다. 주로 긴 인용구나 다른 소스에서의 인용을 표시하는 데 사용됩니다.

<span>: 이 태그는 인라인 요소를 감싸며, 스타일링을 적용하거나 특정 부분을 그룹화하는 데 사용됩니다.

<a>: 이 태그는 하이퍼링크를 생성하는 데 사용됩니다. href 속성을 사용하여 다른 웹 페이지, 동일한 페이지의 특정 부분 또는 파일에 대한 링크를 지정할 수 있습니다.

<br>: 이 태그는 줄 바꿈 요소를 나타냅니다. 종료 태그가 없으며, 한 줄을 종료하고 다음 줄로 넘어갑니다.

<em>: 이 태그는 강조된 텍스트를 나타냅니다. 일반적으로 이탤릭체로 표시되며, 강조된 단어나 구를 강조할 때 사용됩니다.

<strong>: 이 태그는 중요한 텍스트를 나타냅니다. 일반적으로 굵은 글꼴로 표시되며, 특히 중요한 내용이나 주의 사항을 강조할 때 사용됩니다.

<input>: 이 태그는 사용자로부터 데이터를 입력받는 입력 필드를 생성하는 데 사용됩니다. type 속성을 사용하여 입력 필드의 유형을 지정할 수 있습니다.

<label>: 이 태그는 입력 요소에 대한 레이블을 정의하는 데 사용됩니다. 일반적으로 사용자에게 입력 필드의 목적이나 내용을 설명하기 위해 사용됩니다.

<img>: 이 태그는 이미지를 삽입하는 데 사용됩니다. src 속성을 사용하여 이미지 파일의 경로를 지정하고, alt 속성을 사용하여 이미지에 대한 대체 텍스트를 제공할 수 있습니다.

<a> 태그의 attribute target 추가 설명

<a href="Html.html" target="_blank">day2_Html 파일 열기</a>:

타겟 값: _blank
설명: 링크된 리소스를 새로운 브라우저 탭이나 창에서 엽니다.
<a href="../text/intro.html" target="_self">intro 파일 열기</a>:

타겟 값: _self
설명: 링크된 리소스를 현재 창에서 엽니다. 기본적으로 타겟 속성이 지정되지 않았을 때의 동작입니다.
<a href="../intro.html" target="_parent">parent</a>:

타겟 값: _parent
설명: 링크된 리소스를 현재 창의 부모 프레임 또는 상위 브라우저 창에서 엽니다.
<a href="../intro.html" target="_top">top</a>:

타겟 값: _top
설명: 링크된 리소스를 현재 창의 최상위 프레임이나 브라우저 창에서 엽니다.
<a href="../intro.html" target="myframe">myframe</a>:

타겟 값: myframe
설명: 링크된 리소스를 <iframe> 요소 중 name 속성이 "myframe"으로 지정된 프레임이나 <frame> 요소에서 엽니다.

HTML Form 요소

action 속성

  • 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시
    • 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다.

method 속성

  • 입력받은 데이터를 서버에 전달할 방식을 명시
  • 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다.

HTML에서는 다양한 타입의 input 요소를 사용하여 사용자로부터 입력을 받을 수 있다.

ex)

  • 텍스트 입력(text)
  • 비밀번호 입력(password)
  • 라디오 버튼(radio)
  • 체크박스(checkbox)
  • 파일 선택(file)
  • 선택 입력(select)
  • 문장 입력(textarea)
  • 버튼 입력(button)
  • 전송 버튼(submit)
  • 필드셋(fieldset

CSS (Cascading Style Sheets)

HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어

HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 한다. 이 작업은 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들어진다.

이러한 문제점을 해소하기 위해 W3C(World Wide Web Consortium)에서 만든 스타일 시트 언어가 CSS다.

CSS 스타일은 주로 세 가지 방법으로 HTML에 적용할 수 있다.

1. 인라인 스타일(Inline style)

  • 인라인 스타일은 HTML 요소의 style 속성에 직접 작성하는 방식
  • 이 방식은 특정 요소에 스타일을 즉시 적용하고 싶을 때 유용하나, 재사용성과 유지 보수 측면에서는 비효율적이다.

2. 내부 스타일 시트(Internal style sheet)

  • 내부 스타일 시트는 HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 작성한다.
  • 이 방식은 HTML 문서 안에서 스타일을 중앙 집중적으로 관리할 수 있으므로, 여러 요소에 동일한 스타일을 적용하거나 일괄적으로 스타일을 변경할 때 유용하다.

3. 외부 스타일 시트(External style sheet)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>This is an external style.</p>
</body>
</html>
  • 외부 스타일 시트는 별도의 .css 파일에 스타일을 작성하고, 이를 HTML 문서에 연결한다.
  • 이 방식은 재사용성과 유지 보수 측면에서 가장 효율적이다.
  • 여러 HTML 문서에서 동일한 스타일을 공유하거나, 스타일을 분리하여 작업하고 싶을 때 사용한다.

CSS 선택자(selectors)

아이디(id) 선택자

  • 아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용

  • 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 준다.

  • id 선택자는 하나만 적용 가능하다. 따라서 어지간하면 쓰지 말고 class를 쓰자.

클래스(class) 선택자

  • 클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용

  • 이러한 특정 집단을 클래스(class)라고 하며, 동일한 클래스 이름을 가지는 요소들을 모두 선택해 준다.

그룹(group) 선택자

  • 그룹 선택자는 위에서 언급한 여러 선택자를 같이 사용하고자 할 때 사용

  • 그룹 선택자는 여러 선택자를 쉼표(,)로 구분하여 연결

  • 코드의 중복을 줄여 가독성 높게 해 줌


css 적용 우선순위

  1. 인라인 스타일: HTML 요소의 style 속성 내에 정의된 스타일. 이는 가장 특정성이 높으므로 인라인 스타일이 정의된 요소에 대해 다른 모든 스타일을 덮어쓴다.

  2. ID 선택자: #id 형태의 선택자를 사용하는 스타일. 이는 클래스 선택자보다 특정성이 높다.

  3. 클래스 선택자: .class 형태의 선택자를 사용하는 스타일. 이는 태그 선택자보다 특정성이 높다.

  4. 태그 선택자: HTML 태그를 직접 지정하는 스타일. 이는 가장 특정성이 낮으므로 위의 세 가지 스타일에 의해 덮어쓰일 수 있다.

  5. 소스 순서: 만약 특정성이 같은 스타일이 여러 개 있다면, 소스 코드에서 나중에 나오는 스타일이 적용된다.


실습

우선 Bootstrap을 제거하고 css를 추가해 절반정도 꾸며보았다.

배포주소

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>(신랑이름)과 (신부이름)의 결혼식</title>
    <meta content="(신랑이름)과 (신부이름)의 결혼식에 와서 축하해주세요~!" name="description"/>

    <style>
        .map-icon {
            width: 50px;
            height: 50px;
        }

        .head {
            background: url('https://t1.daumcdn.net/cfile/tistory/99AED0335B7A1A2D13') no-repeat center center;
            background-size: cover;
            height: 460px;
        }

        .img-fluid {
            max-width: 100%;
            height: auto;
        }

        .text-center {
            text-align: center;
        }

        .text-muted {
            color: #6c757d;
        }

        .pl-2 {
            padding-left: .5rem;
        }

        .pt-2 {
            padding-top: .5rem;
        }

        .invitation-mentions {
            background-color: rgb(202, 255, 202);
        }

        .center-middle {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    </style>

    </head>

    <body>
        <div class="head" style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 460px;">
            <p class="ww-couple-name ww-title" style="font-size:2.0em">(Groom's name) & (Bride's name)</p>
            <p class="h2 mt-5 ww-title" style="font-family: 'Gugi', cursive; font-size:1.0em">
            | WE ARE GETTING MARRIED |
            </p>
        </div>


        <div style="text-align:center;">
            <p class="ww-couple-name ww-title" style="font-size:3.0em">신랑 & 신부</p>
        </div>

        <div style="display: flex; justify-content: space-around;">
            <div style="flex: 1; text-align: center;">
                <h2>(groom's name)</h2>
                <img alt="Groom" class="img-solo-photo" src="https://cdn.newsculture.press/news/photo/202204/508246_615883_4316.jpg" width="500" height="500"/>
            </div>
            <div style="flex: 1; text-align: center;">
                <h2>(Bride's name)</h2>
                <img alt="Bride" class="img-solo-photo" src="https://image.jtbcplus.kr/data/contents/jam_photo/202208/23/c759fb8b-631d-46c6-a614-75819e82cf58.jpg" width="500" height="500"/>
            </div>
        </div>
        <div class="invitation-mentions">

            <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
                <img src="https://resources.barunsonmcard.com/upload/invitation/230306/319322/e932ad3f-965f-4796-b7b9-54ad75dbfa34.png" style="width:800px; height:299px;">
            </div>

            <div class="col text-center mb-5">
                <h6 style="font-family: 'Noto Serif KR', serif;">
                    x<br>
                    (만난지 x년+x일 되는날 결혼 = x일)
                </h6>
            </div>

            <div class="invitation-mentions" style="font-family: 'Nanum Myeongjo', serif;color: #333333;font-size: 34px;text-align: center;letter-spacing: 0em;line-height: 2.3em;">
                (신랑)과 (신부)의 xxx일 끝에 맞잡은 두 손<br>구 즌(궂은) 비바람에도 놓치 않고,<br>다 른 그 무엇보다 소중하고 귀하게<br>은 은한 빛이되어 서로를 환하게 밝히려 합니다.<br><br>바쁘신 가운데 귀한 걸음 하시어<br>저희 결혼식을 축복해주신다면<br>앞으로도 더 없을 기쁨일 것입니다.<br><br>
            </div>
        </div>

        <h4>웨딩 본식</h4>

        <ul>
            <li>
              <span class="pl-2 text-muted">(결혼식장 주소)</span>
            </li>
            <li class="pt-2">
              <span class="pl-2 text-muted">20xx년 xx월 xx일, x:xxPM</span>
            </li>
        </ul>
        <img alt="Wedding Hall" src="https://www.ihall.co.kr/center/pic/banquet_ent_poto/14689960721648090483.jpg"/>

        <h4>식사</h4>
        <ul>
            <li>
              <span class="pl-2 text-muted">(결혼식장 식당 주소 [층수])</span>
            </li>
            <li class="pt-2">
              <span class="pl-2 text-muted">(식사가능 시간대)20xx년 xx월 xx일, x:xxPM ~ x:xxPM</span>
            </li>
        </ul>
        <img alt="Restaurant" class="img-fluid" src="https://www.iwedding.co.kr/center/website/ihall_img/1468996072/1468996072_img_4538_0_1534476162.jpg"/>

        <footer>
          <p>Created by <a href="https://github.com/wish9">위원종</a></p>
        </footer>

        <h2>포토 갤러리</h2>
        <div class="photo-gallery">

            <div class="card-columns">
              <div class="card" data-groups="[&quot;party&quot;,&quot;wedding&quot;]">
                <a data-gallery="ww-gallery" data-toggle="lightbox">
                  <img alt="Gallery Pic 2" class="img-fluid" src="https://t1.daumcdn.net/cfile/tistory/99AED0335B7A1A2D13"/>
                </a>
              </div>
            </div>
            <!--                위에꺼(class = card) 복붙해서 사진 여러장 추가하면 됨-->

            <div class="card-columns">
              <div class="card" data-groups="[&quot;party&quot;,&quot;wedding&quot;]">
                <a data-gallery="ww-gallery" data-toggle="lightbox">
                  <img alt="Gallery Pic 2" class="img-fluid" src="https://static.cdn.soomgo.com/upload/service/294f02e9-d204-42ce-a8ba-b00e4006f424.jpg?webp=1"/>
                </a>
              </div>
            </div>

        </div>

        <h2 class="h1 text-center pb-3 ww-title" style="font-family: 'Noto Serif KR', serif;">Gift for our wedding</h2>

        <div class="center-middle">
            <p>신랑 계좌번호 ~~~ (나중에 토스 등 링크 첨부예정)</p>
        </div>

        <div class="center-middle">
            <p>신부 계좌번호 ~~~ (나중에 토스 등 링크 첨부예정)</p>
        </div>

        <h2 class="h1 text-center pb-3 ww-title" style="font-family: 'Noto Serif KR', serif;">오시는 길</h2>
        <div class="center-middle">
            <div>
                <h5 style="font-family: 'Noto Serif KR', serif;">(식장 주소, 이름)</h5>
                <h6 style="font-family: 'Noto Serif KR', serif;">(식장 도로명 주소)</h6>
            </div>
        </div>
        <div class="form-group center-middle">
          <div class="col-md-12">
            <div class="my-3 text-center">
              <a href="https://naver.me/FNmlDJ15">
                <img alt="naver-map" class="map-icon" id="naver-map"
                     src="https://andersonchoi.github.io/wedding-card/images/map/naver-map.png"/>
              </a>
              <a href="http://kko.to/z_285Reg6e">
                <img alt="kakao-map" class="map-icon" id="kakao-map"
                     src="https://andersonchoi.github.io/wedding-card/images/map/kakao-map.png"/>
              </a>
              <a href="https://goo.gl/maps/2ZgFBpuYNTgR5dbC7">
                <img alt="google-map" class="map-icon" id="google-map"
                     src="https://andersonchoi.github.io/wedding-card/images/map/google-map.png"/>
              </a>
            </div>
            <div class="col text-center">
              <label style="font-family: 'Noto Serif KR', serif; font-size: 15px;">
                셔틀버스 - ~~에서 xx분 간격으로 운행
              </label>
            </div>
          </div>
        </div>

<!--      Todo  <p>구글 or 카카오 지도 띄우기</p> -->

        <div class="center-middle">
            <footer>
                <p>Created by <a href="https://github.com/wish9">위원종</a></p>
            </footer>
        </div>

    </body>
</html>

본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스 완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성 되었습니다.

1개의 댓글

comment-user-thumbnail
2023년 7월 20일

아주 유익한 내용이네요!

답글 달기