[코딩클럽/웹개발 종합반] HTML, CSS 기본

[코딩클럽/웹개발 종합반] HTML, CSS 기본 - 1주차 1장

2022. 5. 29. 14:56ㆍ비즈니스 탐색/개발

728x90

[코딩클럽/웹개발 종합]

HTML, CSS 기본

1주차 1장

서버, 클라이언트 웹의 동장 개념

HTML, CSS기초를 이해하는 시간을 가져본다. 개념을 이해하는 시간.

[왕초보] 비개발자를 위한, 웹개발 종합반 학습내용과 부가적으로 리서치하고 학습한 코드들을 함께 학습해본다.

기본중의 기본

코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워진다.
Pycharm에서 ctrl+alt+L (맥은 cmd+alt+L) 로 자동정렬 기능을 사용하면 된다.
간단한 로그인 페이지, 로그인 HTML

<!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>

자주 쓰이는 CSS 연습

CSS 기본

CSS는 HTML 문서의 스타일을 지정하는 데 사용하는 언어이다. CSS는 Cascading Style Sheets의 약자로 HTML 요소가 화면, 종이 또는 기타 미디어에 표시되는 방식을 설명한다. CSS는 많은 작업을 절약하고 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있는 장점이 있다. 외부 스타일시트는 CSS 파일에 저장된다.

CSS를 사용하는 이유는 CSS는 다양한 장치 및 화면 크기에 대한 디스플레이의 디자인, 레이아웃 및 변형을 포함하여 웹 페이지의 스타일을 정의하는 데 사용한다고 본다.

<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어야 한다.
mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하자.
자주 쓰이는 CSS는 아래와 같다.
margin은 바깥 여백을, padding은 내 안쪽 여백 > 헷갈리지 말자!

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
p {
  color: red;
  text-align: center;
}

스타일 정의는 일반적으로 외부 .css 파일에 저장되고, 외부 스타일시트 파일을 사용하면 파일 하나만 변경하여 전체 웹사이트의 모양을 변경할 수 있다.

배경관련
background-color
background-image
background-size

사이즈
width
height

폰트
font-size
font-weight
font-famliy
color

간격
margin
padding

이미지 URL HTML 코드

만들어둔 로그인 화면을 가운데로 가져오려면 width를 주고, margin: auto를 사용하면 된다. 그래도 안되면? display:block을 추가해보자.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>연습 : 로그인페이지</title>
    <style>
        .mytitle {
            color: white;
            width: 300px;
            height: 200px;
            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
            
            border-radius: 10px;
            text-align: center;
            padding-top: 40px;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력해주세요</h5>
    </div>
    <div>
        <p>
            ID: <input type="text" />
        </p>
        <p>
            PW: <input type="password" />
        </p>
    </div>
    <button>로그인하기</button>
</body>
</body>

</html>

드롭다운

CSS로 호버블 드롭다운을 만든다. 사용자가 요소 위로 마우스를 이동할 때 나타나는 드롭다운 상자를 만든다.

.dropdown 클래스는 드롭 position:relative 다운 콘텐츠를 드롭다운 버튼 바로 아래에 배치할 때 사용( position:absolute).
.dropdown-content실제 드롭다운 콘텐츠를 보유한다고 이해하자. 기본적으로 숨겨져 있으며 마우스를 가져가면 표시된다.(아래 참조). 160px min-width로 설정해보았다.
테두리를 사용하는 대신 CSS box-shadow 속성을 사용하여 드롭다운 메뉴가 박스처럼 보이게 된다.
:hover선택기는 사용자가 드롭다운 버튼 위로 마우스를 이동할 때 드롭다운 메뉴를 표시하는 데 사용된다.

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span> 마우스오버해보세요 </span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

일반적인 박스버튼 타입의 드롭다운 메뉴바 3개 노출

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Dropdown Menu</h2>
<p>아래 3가지 중 1가지를 선택해주세요</p>

<div class="dropdown">
  <button class="dropbtn">드롭다운</button>
  <div class="dropdown-content">
  <a href="#">노출1</a>
  <a href="#">노출2</a>
  <a href="#">노출3</a>
  </div>
</div>

</body>
</html>

드롭다운 탐색메뉴

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: green;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">work</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

</body>
</html>

폰트, 주석

- 구글 웹폰트 입히기 위한 방법

마음에 드는 폰트를 클릭 > + Select this style 을 클릭 > mbed 탭을 클릭 > link 태그를 복사해서 <head> ~ </head>사이에, CSS를 복사해서 <style> ~ </style> 사이에 넣는다. 나눔고딕 폰트를 예제로 추가해보면, 아래와 같은 코드를 복사하면 된다.
주석은 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하거나 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용한다.
주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않는다. 즉, 개발자 본인 또는 동료를 위해 붙여두는 것이다.
단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시)

<!-- HTML에 이 부분을 추가하고 -->
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">

/* CSS에 이 부분을 추가하면 완성! */
* {
	font-family: 'Nanum Gothic', sans-serif;
}

CSS 파일 분리

지금은 css가 간단하고, 한 파일에서 보는 게 편하지만 <style> ~ </style> 부분이 너무 길어지면, 보기가 어렵. 이럴 땐 아래와 같이 파일을 분리해둘 수 있다.

이 부분이 조금 헷갈리지만 실전 프로젝트를 다루면서 더 빠르게 이해해보자.

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

728x90

저작자표시 비영리 변경금지

'비즈니스 탐색 > 개발' 카테고리의 다른 글

[앱개발/종합반] 1주차 1강 - 앱 개발과 서버의 이해, 자바스크립트 기초 (0)	2022.05.30
[코딩클럽/웹개발 종합반] 부트스트랩 기본 / 컨테이너(container-fluid클래스) - 1주차 2장 (0)	2022.05.29
[준비] 프로그램 설치 Pycharm Professional / JetBrains / aws가입 (0)	2022.05.22
[오류/에러] HTTP Status 405 - Request method 'POST' not supported (0)	2022.02.24
[struts/servletConfig] 인터셉터(initerceptor) – servletConfig (0)	2022.02.23

Fail Hard. Fail Fast. Fail Often