프로그래밍 일기 — 웹 페이지 만들기
웹 페이지를 만들어 보았다.
#웹페이지, #웹디자인, #웹프로그래밍, #CSS, #HTML, #Bootstrap
“지식을 행하지않으면 내 것은 되지 않는다.”
아무리 새로운 지식을 접하게 되었다고해도, 그것을 실제로 적용시키지 못하면 의미가 없다. 정말 무언가를 안다고 말할 수 있으려면, 배운 것을 적시에 활용할 수 있어야한다. 프로그래밍은 이를 실천하는데 있어 더 할나위없이 좋은 도구다. 아무리 언어의 문법을 외워도, 실제로 자신이 생각한대로 쓰지 못하면 아무 의미가 없기 때문이다. 자신이 배운 지식을 활용해야 의미가 생길 수 밖에 없는 프로그래밍의 특성 때문이다. 컴퓨터의 언어는 종이위의 글로써가 아닌, 실제로 컴파일되고 실행되어야 의미가 있는 것이니까. 그래서 오늘은 이전에 쌓은 HTML에 대한 기본 지식을 바탕으로 본격적으로 웹페이지를 만들어 보는 연습을 하려한다.
웹 페이지 만들기
웹페이지, 즉 HTML 파일은 속성을 정의하는 Head와, 콘텐츠를 정의하는 Body로 나뉘어진다고 언급했다. 그렇다면, 가장 좋은 연습 방법은 Head와 Body의 다양한 요소들을 활용해 보면서 웹페이지를 구축해 보는 것이다.
로그인 페이지 만들어보기
아래는 로그인 페이지를 구성해본 HTML 예제이다. 간단한 텍스트와, ID/비밀번호를 입력할 수 있는 인터페이스와 버튼으로 구성되어있다. <input>태그는 정보를 입력할 수 있는 인터페이스를 구성해주며, <button>은 입력 후 정보를 전달할 수 있는 버튼을 생성해준다. <title>은 페이지 제목이며 브라우저 탭에 표시된다. 이는 속성이기 때문에 Head에 속한다. <h1>는 페이지내에서 가장 큰 크기의 텍스트를 나타낼 때 사용한다. 해당 페이지가 어떤 페이지인지 알아 볼 수 있게 “로그인 페이지"로 표시했다. 이는 실제로 페이지에서 보여지는 내용이기 때문에 Body에 속한다.
즉, 페이지 겉으로 드러나지 않지만, 페이지의 기본 설정을 정의하는 것이 Head에 들어가며, 페이지상에서 유저에게 보여지는 부분은 대부분 Body에 속한다 할 수 있다. Head가 웹페이지의 백엔드, Body가 프론트엔드의 개념이라고 보면 이해하기쉽다.
// HTML예제 - 로그인 페이지 구현 (input, button 활용)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title> <!-- 탭에서 볼 수 있는 페이지 제목 -->
</head>
<body>
<h1>로그인 페이지</h1> <!-- 페이지에서 가장 큰 크기의 글씨 -->
<p>ID: <input type="text" /></p> <!-- 텍스트 입력 인터페이스 정의 -->
<p>PW: <input type="text" /></p> <!-- 텍스트 입력 인터페이스 정의 -->
<button>로그인하기</button> <!-- 버튼 인터페이스 정의 -->
</body>
</html>
팁: HTML에서의 부모자식관계(2)
HTML에서 또하나 중요한 것은 이 안에서도 Java의 클래스와같이, 부모와 자녀의 관계가 존재한다는 사실이다. HTML태그상에서 특정 태그가 어떤 태그안에 속해있다면 그 태그는 상위 부모태그의 자녀태그가 된다. 부모태그의 변경은 그 안에 있는 자녀태그에게도 영향을 준다.
예를 들어 아래 코드에서 <div id=”content>와 <div id="nav"> 는 몇 개의 자녀태그를 갖는다. <div id=”content> 의 경우 <h1> 과 <p> 2개, <hr> 이라는 4개의 자녀태그를 갖는다. 만약 <div id=”content”> 를 <div id=”nav”>내로 옮긴다면 <div id=”content”> 는 <div id=”nav”> 의 자녀태그가되며, <div id=”content”> 의 모든 자녀태그들은 <div id=”nav”> 의 손자태그(Descendant)가 된다.
마찬가지로
즉, HTML에서는 가족관계가 아래와 같이 정의된다.
- 조상태그(Ancestor): 부모(parent)보다 한 단계 이상의 상위 태그
- 부모태그(Parent): 자녀(Child)태그의 바로 상위 태그
- 자녀태그(Child): 부모(Parent)태그의 바로 하위 태그
- 손자태그(Descendant): 자녀(Child)태그의 한 단계 이하의 하위 태그
// HTML 부모-자녀 태그 관계 예제 (최상위 부모태그 기준)
<body>
<div id="content"> <!-- 부모태그 -->
<h1>Heading here</h1> <!-- 자녀태그 -->
<p>Lorem ipsum dolor sit amet.</p> <!-- 자녀태그 -->
<p>Lorem ipsum dolor <em>sit</em> amet.</p> <!-- 자녀태그 -->
<hr>
</div>
<div id="nav"> <!-- 부모태그 -->
<ul> <!-- 자녀태그 -->
<li>item 1</li> <!-- 손자태그 -->
<li>item 2</li> <!-- 손자태그 -->
<li>item 3</li> <!-- 손자태그 -->
</ul>
</div>
</body>
_______________________________________________
// HTML 부모-자녀 태그 관계 예제 2 (최상위 부모태그 기준)
<body>
<div id="nav"> <!-- 부모태그 -->
<div id="content"> <!-- 자녀태그 -->
<h1>Heading here</h1> <!-- 손자태그 -->
<p>Lorem ipsum dolor sit amet.</p> <!-- 손자태그 -->
<p>Lorem ipsum dolor <em>sit</em> amet.</p> <!-- 손자태그 -->
<hr> <!-- 손자태그 -->
</div>
<ul> <!-- 자녀태그 -->
<li>item 1</li> <!-- 손자태그 -->
<li>item 2</li> <!-- 손자태그 -->
<li>item 3</li> <!-- 손자태그 -->
</ul>
</div>
</body>CSS활용하기
이번에는 CSS를 활용하는 연습을 해보자. CSS는 웹페이지의 세부적인 시각적 요소들을 조금 더 미적으로 꾸밀 수 있게해주는 역할을한다. CSS를 활용하는 방법은 <head> 태그내 <style>이라는 태그를 추가하여 이 안에서 정의한다. 여기서 Java와 비슷한 문법을 볼 수 있는데, 매서드를 활용할 때 쓰는 “.”을 활용하여 “{}”내 코드를 작성한다. 즉,.매서드이름 {코드내용} 의 문법을 활용한다. 프로그래밍 언어를 미리 배워놓은 것이 예상외로 이럴 때 도움이 된다. CSS에 활용되는 요소들은 무수히 많으나, 대표적으로 많이 쓰이는 CSS의 요소들은 아래와 같다. 더 많은 요소들을 알고 싶다면 참조(3)을 참조할 수 있다.
- 배경설정:
background-color,background-image,background-size - 사이즈:
width,height - 폰트:
font-size,font-weight,font-family,color - 간격:
margin(바깥여백 조정),padding(안쪽여백 조정) - 텍스트:
h1, …,h5,p - 그룹(여러 요소들을 그룹화하기위해 사용한다):
div
위에 소개한 코드를 재활용해 CSS로 조금 더 웹페이지를 꾸며보자. 우리가 원하는 이미지의 URL을 가져와서 페이지를 조금 더 흥미롭게 꾸며볼 수 있다. 아래 <style> 내 .mytitle{} 메서드를 통해 로그인 페이지의 새부적인 요소들을 설정할 수 있다. 이후에Body내 <div> 태그내 사용하는 CSS매서드의 이름을 넣어주어야한다.
<!-- 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>Document</title>
<style>
.mytitle { <!-- CSS를 이용해 원하는 페이지의 스타일을 정의한다. -->
background-color: green;
width: 300px;
height: 200px;
border-radius: 10px;
color: yellow;
text-align: center;
padding: 30px 0px 0px 0px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
}
.wrap { <!-- 페이지를 가운데로 가져오는 매서드 -->
width: 300px;
margin: 20px auto 0px auto;
}
</style>
</head>
<body>
<div id="1" class="wrap"> <!-- body내 사용한 CSS의 매서드 이름을 넣어준다. -->
<div id="2" class="mytitle"> <!-- body내 사용한 CSS의 매서드 이름을 넣어준다. -->
<!-- 자녀태그에도 변경사항이 적용된다. -->
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button>로그인하기</button>
</body>
</html>아래는 위 HTML코드를 실행한 모습이다. 주목할 것은 위 .mytitle{} 매서드를 통해 텍스트의 색을 노란색으로 정의하여 부모태그인 <div id="2"> 에 넣어주었다. 자동적으로 자녀태그인 <h1> 과 <h5> 가 노란색으로 적용되었다. 마찬가지로 페이지 요소를 가운데로 가져오는 .wrap{} 매서드역시, 조상태그인 <div id="1"> 에 적용하였고, 일괄적으로 자녀태그및 손자태그들에 적용된 것을 알 수 있다. 이렇게 상위태그를 변경하면 자동적으로 하위태그를 함께 변경할 수 있다.
외부 폰트 활용하기
외부 폰트를 가져와 활용할 수도 있다. 가장 널리쓰이는 구글폰트를 활용해 연습해본다. 링크로 들어가 원하는 종류의 폰트를 찾아 Select버튼을 클릭한다. 우측 최상단의 아이콘을 클릭하여 <link>라 표시된 부분을 <head> 로 가져오고, 그 아래 CSS rules 부분을 <style> 의 메서드로 가져간다.
아래는 위 코드를 아래 HTML 내 적용한 모습이다. <head> 내 <style> 밖에 링크를 붙여넣었고, .mytitle{} 매서드내 CSS Rule부분을 붙여넣었다. 이렇게하면 해당 매서드를 활용하는 부분에 텍스트가 존재할 경우 해당 폰트가 적용된다.
<!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>Document</title>
<!-- 구글 폰트 링크 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
<style>
.mytitle { <!-- CSS를 이용해 원하는 페이지의 스타일을 정의한다. -->
background-color: green;
width: 300px;
height: 200px;
border-radius: 10px;
color: yellow;
text-align: center;
padding: 30px 0px 0px 0px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
<!-- 적용하려는 CSS Rule -->
font-family: 'East Sea Dokdo', cursive;
}
.wrap { <!-- 페이지를 가운데로 가져오는 매서드 -->
width: 300px;
margin: 20px auto 0px auto;
}
</style>
</head>
<body>
<div id="1" class="wrap"> <!-- body내 사용한 CSS의 매서드 이름을 넣어준다. -->
<div id="2" class="mytitle"> <!-- body내 사용한 CSS의 매서드 이름을 넣어준다. -->
<!-- 자녀태그에도 변경사항이 적용된다. -->
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button>로그인하기</button>
</body>
</html>
파일 분리하여 작업하기
코드가 지나치게 한 파일에서 길어지게되면 관리가 어려울 수 있다. 이런 상황을 막기 위해 현업에서는 목적에 따라 코드를 분리하기도한다. 특히 HTML, CSS, JavaScript등 여러 프로그래밍 언어들이 복합적으로 들어가는 웹 프로그래밍의 경우에는 이렇게 작업하는 것이 훨씬 더 효율적일 때가 많다.
이번에는 CSS파일을 분리하는 연습을 해보자. <style> 태그내 내용들을 CSS파일로 분리하는 것이다. 현재 HTML파일 경로에 style.css 파일을 하나 만들고 태그내 내용들을 모두 이리로 옮긴다. 자연스럽게 <style> 태그는 HTML파일에서 사라지며, CSS 파일에서도 해당 태그는 더 이상 활용되지 않는다. 이미 CSS파일이 스타일을 정의하기 위한 목적이기 때문이다.
<!-- HTML 파일 예제 (CSS파일 분리) -->
<!-- CSS파일 (style.css) -->
.mytitle {
background-color: green;
width: 300px;
height: 200px;
border-radius: 10px;
color: yellow;
text-align: center;
padding: 30px 0px 0px 0px;
background-image: url('https://cdn.pixabay.com/photo/2014/12/16/12/59/login-570317_1280.jpg');
background-position: center;
background-size: cover;
font-family: 'East Sea Dokdo', cursive;
}
.wrap {
width: 300px;
margin: 20px auto 0px auto;
}
<!-- HTML파일 (indext.html) -->
<!DOCTYPE html>
<html lang="en">
<!-- Head 내 style태그는 더 이상 존재하지 않는다. -->
<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>
<!-- 활용할 css파일의 경로와 이름을 명기한다. -->
<link rel="stylesheet" type="text/css" href = "style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
</head>
<body>
<div Id="1" class="wrap">
<div Id="2" class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button>로그인하기</button>
</div>
</body>
</html>부트스트랩(Bootstrap)
작업할 CSS를 매번 처음부터 코딩하는 일은 번거로울 수 있다. Java에서의 프레임워크(Framework) 개념을 상상하면 이해하기쉽다. 프레임워크란 자주 활용되는 유용한 기능들을 모아놓은 집합이며, 주로 라이브러리(Library)형태로 불러와 가져와쓴다. Java에서는 import <라이브러리 이름> 의 문법으로 라이브러리를 가져올 수 있다.
CSS도 마찬가지로 일반적으로 많이 활용되는 디자인을 한 곳에 모아두면, 디자이너 역시 작업을 하기 훨씬 더 용이할 것이다. CSS는 아래와 같이 Head내에서 링크 소스와 Script소스를 가져오는 것으로 활용이 가능하다. 아래에서는 부트스트랩에 있는 버튼 양식을 가져와 활용한 예제이다. 조금 더 많은 버튼 양식을 알고 싶다면 참조(4)를 확인할 수 있다.
부트스트랩은 CSS를 미리 작성해 라이브러리로 불러온 것이라고 이해할 수 있다. 따라서 부트스트랩의 디자인을 그대로 쓴다면 별도의 CSS파일을 필요로하지않는다.아래와 같이 <button> 태그내 class="btn-primary”라는 클래스를 가 정의되어 있는데, 이 클래스가 이미 만들어진 디자인으로 볼 수 있다. 이렇게 보면 Java에서의 개념과 크게 다르지 않다. 라이브러리를 불러와서 그 안에 내가 원하는 클래스(객체)를 가져와 그것의 매서드를 활용하는 것과 큰 차이가 없는 것이다.
<!-- 부트스트랩 예제 -->
<!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>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
<!-- 부트스트랩 불러오기 -->
<!-- 링크 소스 불러오기 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- 스크립트 소스 불러오기 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<body>
<div Id="1" class="wrap">
<div Id="2" class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<!-- 부트스트랩 활용하여 버튼 구현하기 -->
<button type="button" class="btn btn-primary">로그인하기</button>
</div>
</body>
</html>
만약 CSS를 활용해 조금 더 세밀한 조정을 하고싶다면 style.css 파일 내에서 세부적인 조정을 할 수 있다. 아래는 liner-gradient 라는 매서드를 활용해 배경이미지에 그라디언트(Gradient)효과를 적용시킨 것이다. 위 HTML을 그대로 둔 상태에서 아래처럼 CSS파일만 수정하여 코드를 실행한다.
<!-- Style.css 예제 -->
.mytitle {
background-color: green;
width: 300px;
height: 200px;
border-radius: 10px;
color: yellow;
text-align: center;
padding: 30px 0px 0px 0px;
<!-- 배경이미지에 Gradient효과 적용하기 -->
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.pixabay.com/photo/2014/12/16/12/59/login-570317_1280.jpg');
background-position: center;
background-size: cover;
font-family: 'East Sea Dokdo', cursive;
}
.wrap {
width: 300px;
margin: 20px auto 0px auto;
}
이런식으로 CSS파일 내 활용하고자하는 매서드내 정의된 속성들 마다 원하는 특징을 정의하면 쉽게 세부디자인을 변경할 수 있다. 이번에는 구글폰트에 변화를 줘보자. 아래와 같이 @import url("가져올 약식의 주소")*{변경할 속성 정의} 의 문법으로 정의한다. * 부호를 쓰는 이유는 특정한 매서드를 호출하지 않고 페이지내 모든 폰트에 적용시키겠다는 의미이다(Java상에서 import 라이브러리.* 코드를 사용하면 라이브러리의 모든 클래스와 매서드를 불러오는 것을 생각하면 쉽다.). 이번역시 HTML은 그대로 둔 상태에서 CSS코드에 해당 내용만을 추가하여 폰트를 변경한다.
<!-- CSS 파일 예제 ("고운도둠"이라는 폰트로 바꾼다.) -->
<!-- 폰트를 불러와 모든 페이지에 일괄적으로 적용시킨다. -->
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: green;
width: 300px;
height: 200px;
border-radius: 10px;
color: yellow;
text-align: center;
padding: 30px 0px 0px 0px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.pixabay.com/photo/2014/12/16/12/59/login-570317_1280.jpg');
background-position: center;
background-size: cover;
font-family: 'East Sea Dokdo', cursive;
}
.wrap {
width: 300px;
margin: 20px auto 0px auto;
}
조금 더 심화된 연습을 해보자. 부트스트랩에서 제공하는 카드를 붙여넣을수도 있다. 아래와같이 카드를 적용하고자하는 부분을 <div> 태그를 통해 그룹화한다. 여기서 카드에 대한 세부조정은 CSS를 통해할 수 있다. 아래 코드에서는 .mycards{} 매서드를 통해 카드를 정렬한다. 이 클래스를 태그내에 정의한다(<div class="mycards"> ). 이렇게 하면 카드 부트스트랩을 조금 더 세밀하게 조정할 수 있다. 카드 양식은 아래 가져온 부트스트랩의 다음 경로에 존재한다: https://getbootstrap.com/docs/5.0/components/card/. 또한 카드가 들어갈 부분에 대한 이미지를 넣을 수 있는 <img> 라는 태그가 있는 것에 주목하자. 여기서 사용할 이미지의 URL을 입력할 수 있다 <img src="URL주소"> 의 문법을 따른다.
<!-- CSS 파일 예제 (부트스트랩 카드 적용) -->
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: green;
width: 300px;
height: 200px;
border-radius: 10px;
color: yellow;
text-align: center;
padding: 30px 0px 0px 0px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.pixabay.com/photo/2014/12/16/12/59/login-570317_1280.jpg');
background-position: center;
background-size: cover;
font-family: 'East Sea Dokdo', cursive;
}
.wrap {
width: 300px;
margin: 20px auto 0px auto;
}
<!-- 카드에 대한 세부 조정 내용을 담은 매서드 -->
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
______________________________________________________________
<!-- 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>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<body>
<div Id="1" class="wrap">
<div Id="2" class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button type="button" class="btn btn-primary">로그인하기</button>
<!-- 카드가 들어갈 부분에 대한 그룹 (style.css파일내 .mycards{} 매서드활용)-->
<div class="mycards" style="width: 18rem;">
<!-- 카드에 들어갈 이미지 소스 입력 -->
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072821_1280.jpg" class="card-img-top"s>
<!-- 카드 몸체에 대한 속성 정의 -->
<div class="card-body">
<h5 class="card-title">당신이 좋아하는 책은 무엇인가요?</h5>
<h6 class="card-subtitle mb-2 text-muted">당신의 인생책을 꽃아줘요!</h6>
<p class="card-text">이번 여름은 책속으로의 여행 어떠신가요?</p>
<a href="#" class="card-link">내 인생책은...</a>
<a href="#" class="card-link">좋아하는 책이 없어요</a>
</div>
</div>
</div>
</body>
</html>
마지막으로 이 페이지에 특정한 텍스트 정보를 입력할 수 있는 포스팅박스 인터페이스를 구현해보자.
먼저 큰틀에서의 박스를 만든다. 그림자 효과는 box-shadow 를 통해 넣을 수 있고, padding을 이용해 안쪽 여백을 조정할 수 있다. 다음으로 입력할 책의 URL과(Forms -> Floating Labels)리더로써 남길 코멘트에 대한 URL(Forms -> Floating Labels -> Textareas)을 입력할 것이다. 마지막으로 <div> 태그와 <button> 태그에 display:flex 를 활용하여 기록하기와 닫기 버튼을 구현한다.
<!-- CSS파일 예제 (인터페이스에 활용하기 위한 매서드 추가) -->
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: green;
width: 300px;
height: 200px;
border-radius: 10px;
color: yellow;
text-align: center;
padding: 30px 0px 0px 0px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.pixabay.com/photo/2014/12/16/12/59/login-570317_1280.jpg');
background-position: center;
background-size: cover;
font-family: 'East Sea Dokdo', cursive;
}
.mytitle>button {
width: 250px;
height: 50px;
background-color: transparent;
border: 1px solid white;
color: white;
border-radius: 50px;
margin-top: 20px;
}
.mytitle>button:hover {
border: 2px solid white;
}
.wrap {
width: 300px;
margin: 20px auto 0px auto;
}
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
.mypost {
width: 500px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtn>button {
margin-right: 10px;
}
____________________________________________________________________________
<!-- 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>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<body>
<div Id="1" class="wrap">
<div Id="2" class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button type="button" class="btn btn-primary">로그인하기</button>
<!-- 인터페이스 요소 적용 -->
<div class="mypost">
<!-- 책URL 입력용 인터페이스 -->
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">책URL</label>
</div>
<!-- 코멘트 입력용 인터페이스 -->
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</label>
</div>
<!-- "기록하기"와 "닫기"버튼 적용 -->
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards" style="width: 18rem;">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072821_1280.jpg" class="card-img-top" s>
<div class="card-body">
<h5 class="card-title">당신이 좋아하는 책은 무엇인가요?</h5>
<h6 class="card-subtitle mb-2 text-muted">당신의 인생책을 꽃아줘요!</h6>
<p class="card-text">이번 여름은 책속으로의 여행 어떠신가요?</p>
<a href="#" class="card-link">내 인생책은...</a>
<a href="#" class="card-link">좋아하는 책이 없어요</a>
</div>
</div>
</div>
</body>
</html>
CSS Selectors
위코드를 잘 보면 CSS내 매서드에서 < 부호를 사용하는 것을 볼 수 있다(예: mybtn>button ). 이 부호는 직계자녀태그에 대해서만 적용된다는 의미다. 즉 mybtn이라는 이름의 클래스를 가진 부모태그아래 <button> 이라는 이름의 직계자녀태그에 대해서만 적용된다는 의미다. 이외에도 CSS에서 활용되는 부호들이 있는데 이들에 대한 설명이 필요하다고 느꼈다. 이들은 CSS의 Selector라고 부른다.
Space(빈 칸) 부호
빈 칸은 CSS의 Selector중 하나로써, 부모태그내 있는 모든 자녀태그를 한꺼번에 스타일링하기 위함이다. 이는 자녀태그 뿐만 아니라 그 아래에 속한 모든 손자태그들도 포함한다. 예를 들어 아래와 같다. div는 <div> 태그에 활용한다는 의미이며, # 부호는 태그내 id 속성을 정의하기 위함(위 예제처럼, . 를 쓴다면, 이는 class 라는 속성을 정의하기 위함이다.)이므로 이 뒤에 오는 해당 매서드의 이름은 실제 태그에서 id 로 정의해야한다(그러므로 . 를 쓴다면 class 로 정의해야할 것이다.). 주목해야하는 것은, 그 뒤에 따라오는 빈칸(space)과 p{} 이다. 즉, <div> 부모태그 내 모든<p> 자녀/손자태그들에대해 일괄적으로 적용하겠다는 뜻이다.
<!-- 기본 CSS Selector (Space) 예제 - div태그내 모든 자녀 p태그들을 녹색으로 바꾼다. -->
div#container p{
background-color:green;
}
<!-- HTML상에서의 활용 -->
<html>
<head>
...
</head>
<body>
<!-- div에 대한 id값을 매서드에 정의한 것과 일치하게끔 정의한다. -->
<div id = "container">
<!-- 위 부모태그에 속하는 모든 "p" 자녀/손자태그에 적용한다. -->
<p> Hello! </p>
<div>
<p> 안녕! </p>
</div>
<p> Hallo! </p>
</div>
</body>
</html>“>” 부호
위 빈칸(space) 부호와 달리, 직계 자녀태그에 대해서만 적용하겠다는 의미다.
<!-- 기본 CSS Selector (Space) 예제 - div태그내 직계 자녀 p태그들을 녹색으로 바꾼다. -->
div#container>p{
background-color:green;
}
<!-- HTML상에서의 활용 -->
<html>
<head>
...
</head>
<body>
<!-- div에 대한 id값을 매서드에 정의한 것과 일치하게끔 정의한다. -->
<div id = "container">
<!-- 위 부모태그에 속하는 직계 "p" 자녀태그에만 적용한다. -->
<p> Hello! </p>
<div>
<p> 안녕! </p> <!-- 해당없음 -->
</div>
<p> Hallo! </p>
</div>
</body>
</html>“+”부호
인접자매태그(Adjacent Sibling)에 대해서 적용한다는 의미다. 같은 부모태그를 가진 자녀태그들 중 이전 Selector에 의해 선택된 자녀태그 바로 다음태그에 대해 적용한다는 의미다. Default상황에서는 특별히 이전에 Selector를 활용하지 않았다면 첫 번째 자녀태그를 지나쳐 바로 다음 두 번째 태그를 참조하게된다.
<!-- 기본 CSS Selector (Space) 예제 - div태그내 자녀 p태그들 중 이전 Selector 참조 이후의 태그를 녹색으로 바꾼다. -->
div#container+p{
background-color:green;
}
<!-- HTML상에서의 활용 -->
<html>
<head>
...
</head>
<body>
<!-- div에 대한 id값을 매서드에 정의한 것과 일치하게끔 정의한다. -->
<div id = "container">
<!-- 위 부모태그에 속하는 직계 "p" 자녀태그들 중 바로 다음 참조태그에만 적용한다.-->
<p> Hello! </p> <!-- Default 상황에서는 이 태그를 건너 뛰고 다음 자녀태그로 간다. -->
<div>
<p> 안녕! </p> <!-- 해당없음 -->
</div>
<p> Hallo! </p> <!-- 적용되는 태그 (Default 상황에서는 첫 번째 자녀태그 이후 두 번째 자녀태그를 참조한다.) -->
</div>
</body>
</html>“~” 부호
일반자매태그(General Sibling)에 대해 적용한다. + 부호와의 차이는 이전에 참조된 태그를 건너뛰어 그 다음 모든 자녀태그에게 일괄적용한다는 의미다.
<!-- 기본 CSS Selector (Space) 예제 - div태그내 자녀 p태그들 중 이전 Selector 참조 이후의 모든 태그를 녹색으로 바꾼다. -->
div#container~p{
background-color:green;
}
<!-- HTML상에서의 활용 -->
<html>
<head>
...
</head>
<body>
<!-- div에 대한 id값을 매서드에 정의한 것과 일치하게끔 정의한다. -->
<div id = "container">
<!-- 위 부모태그에 속하는 직계 "p" 자녀태그들 중 다음 참조태그 이후 모든태그에 적용한다.-->
<p> Hello! </p> <!-- Default 상황에서는 이 태그를 건너 뛰고 다음 자녀태그로 간다. -->
<div>
<p> 안녕! </p> <!-- 해당없음 -->
</div>
<p> Hallo! </p> <!-- 적용되는 태그 (Default 상황에서는 첫 번째 자녀태그 이후 두 번째 자녀태그를 참조한다.) -->
<p> Bonjour! </p> <!-- 적용되는 태그 (위 적용된 태그 이후 모든 자녀태그들에 적용된다.) -->
</div>
</body>
</html>참조:
(1) https://pixabay.com/illustrations/construction-web-website-repair-1905892/
(2) http://web.simmons.edu/~grabiner/comm244/weekfour/document-tree.html
(3) https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
