교육/엘리스 SW 학습 내용

[엘리스sw] 1주차 1일 - HTML/CSS 기초 문법

꼽파 2023. 12. 25. 20:26

◆ 웹사이트의 정보와 디자인
◆ 웹사이트 레이아웃에 영향을 미치는 요소

◆  웹사이트의 정보와 디자인

웹을 구성하는 요소

· HTML : 정보 or 설계도
· CSS : 디자인 or 스타일링
· JavaScript : 기능과 효과

웹사이트 제작시 고려 사항
· 웹 표준 : 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격, 강제성은 없으나 검색엔진 최적화에 도움됨.

· 웹 접근성 : 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 방식
· 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법

HTML 기본 태그

HTML 
· Hyper Text Markup Language
· 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어
· 버전이 업그레이드되면서 자주 사용되지 않는 언어는 사라지고, 새로운 용어가 등장함.
ex. article, aside, area → HTML5

 

HTML 기본 태그

태그명 HTML이 갖고 있는 고유 기능
<열린태그></닫힌태그> 형태로 입력 (닫힌 태그가 없는 것도 있음)
속성 HTML 태그가 갖고 있는 추가 정보
속성값 어떤 역할을 수행할지 구체적인 명령을 진행

 

HTML 문서의 기본 구조

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, 
        maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> HTML5라는 신조어로 문서를 선언하는 태그
<html> ... </html> HTML 문서의 시작과 끝
모든 HTML 태그들은 이 <html> 태그 안쪽에 입력
<head> ... </head> 웹사이트의 간단한 요약 정보를 담는 영역 (저작자, 키워드 등)
웹사이트에서 노출되지 않는 정보
<meta charset="UTF-8"> character setting의 약자를 나타내는 문자 코드
모든 문자를 웹 브라우저에서 깨짐 없이 표시하겠다는 의미
<body> ... </body> 웹사이트에서 사용자의 눈에 보이는 정보를 담는 영역
이미지나 텍스트처럼 출력되는 정보

 

<img> 태그

<img src="apple.png" alt="사과">
  • <img> 태그 : 이미지 삽입, 닫힌 태그 없음.
  • src 속성 : 이미지 파일 경로
  • alt 속성 : 이미지가 출력되지 않는 경우, 텍스트 정보로 대체 (웹 접근성 고려)

<h> 태그

<h1> 제목입니다 </h1>

· Heading의 약자로 제목이나 부제목을 표현함

· 숫자가 클수록 폰트 사이즈가 작으므로 숫자는 정보의 중요도를 나타냄.

· <h1> 태그는 하나의 html 문서에서 1회만 사용됨. (가장 중요한 정보)

 

<p> 태그

<p>이것은 문단입니다</P>

· Paragraph의 약자, 본문 내용을 표현

· 웹사이트의 중요 정보를 담는 태그

· 나타내고자 하는 내용을 열린 태그와 닫힌 태그 사이에 입력

 

<ul> 태그

<ul>
    <li>휘낭시에</li>
    <li>마들렌</li>
    <li>브라우니</li>
</ul>

· Unordered list의 약자로, 순서가 없는 동급의 요소들로 리스트 생성

· 메뉴 버튼 만들 때 사용됨.

구조를 잡을 때 사용하는 태그

<header>, <nav> 태그

<header> <!-- 상단 영역 -->
	<img src="" alt="">
	<nav> <!-- 메뉴 영역 -->
    	<ul>
        	<li><a href="">홈</a></li>
        </ul>
    </nav>
</header>

 

· <header> : 웹사이트의 머리글을 담는 공간, 가장 먼저 보여지는 부분

· <nav> : 메뉴 버튼을 담는 공간 (navigation)

· <ul>, <li>, <a>와 함께 사용

 

<main>, <article> 태그

<main role="main"> <!--본문 영역-->
	<article> <!--정보 영역-->
    	<h1>제목</h1>
    </article>
</main>

· <main> : 문서의 주요 내용을 담음. Explorer는 지원하지 않으므로 role="main" 속성 필수로 입력해야됨.

· <article> : 정보를 담고 구역을 설정함. 표준에 따라 <h#>태그로 제목을 적어줘야 함.

 

<footer> 태그

<footer>
	<div> <!--회사 정보-->
    	<p>주소: 깐따삐아별 안드로메다</p>
        <p>이메일: andromeda@abc.com</p>
    </div>
    <div> <!--전자상거래소비자보호법 필수 정보-->
    	<p>사업자등록번호: 000-000-1234 | 대표: 도우너</p>
        <p>통신판매업신고번호: 제1234-은하계-하하호호</p>
    </div>
</footer>

· <footer> : 사이트 가장 하단의 정보 표기

· <div> : 임의의 공간을 만들 때 사용

HTML 태그의 두 가지 성격: Block, Inline

Block 요소와 Inline 요소

· 두 요소를 구분 짓는 세 가지 주요 특징 : 줄바꿈 현상, 가로세로 생성 여부, 상하 배치

  블록 요소 인라인 요소
줄바꿈 현상 y축 정렬 형태로 출력 (줄바꿈 O) x축 정렬 형태로 출력 (줄바꿈 X, 한줄에 출력)
가로세로 생성 여부 공간을 만들 수 있음 
가로 세로 생성 O		 공간을 만들 수 없음
가로 세로 생성 X
상하 배치 상하 배치 작업 가능 상하 배치 작업 불가능

CSS

Cascading Style Sheet
· 정보(HTML)와 디자인(CSS)의 분리
· 문서의 레이아웃과 스타일 정의
· HTML로 작성된 정보를 꾸며주는 언어

 

· 선택자 : 디자인을 적용할 HTML 영역

· 속성 : 어떤 디자인을 적용할지 정의

· 속성값 : 어떤 역할을 수행할지 구체적으로 명령. 세미콜론(;) 필수 입력

div {
    background-color: #3498db; /* 배경색을 파란색으로 지정 */
    color: #ffffff; /* 글자 색상을 흰색으로 지정 */
    font-size: 16px; /* 폰트 크기를 16px로 지정 */
    font-family: 'Arial', sans-serif; /* 폰트 패밀리를 Arial 또는 sans-serif로 지정 */
}

 

CSS 연동 방법 세 가지 : Inline, Internal, External

Inline Style Sheet
· html 태그 안에 style이라는 속성으로 직접 지정 

<h1 style="color: red;"> coding 101 </h1>


Internal Style Sheet
· head 태그 안에 <style></style>로 넣기 

<head>
	<style>
    	h1 { background-color: yellow; }
    </style>
</head>


External Style Sheet

· head 태그 안에 외부 CSS 파일 불러오기

· html과 CSS를 각각 다른 파일로 관리하기 때문에 가독성이 높고 유지보수가 쉽기 때문에 이 방법으로 사용함.

<head>
	<link rel="stylesheet" href="style.css">
</head>

· rel : 문서의 성격, 정보

· href : 파일 경로 및 이름

CSS 선택자

선택자(Selector)
· CSS 언어가 HTML의 특정 요소를 선택하는 방법
· 종류 : Type(타입), Class(클래스), ID(아이디)

  • Type : 태그
  • Class : 태그에 대한 별명, 이름 앞에 점(.) 붙이기
  • ID : 태그의 이름, 이름 앞에 샵(#) 붙이기 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Type 선택자 */
        p {
            color: blue;
        }

        /* Class 선택자 */
        .highlight {
            background-color: yellow;
        }

        /* ID 선택자 */
        #header {
            font-size: 24px;
        }
    </style>
    <title>CSS Selectors Example</title>
</head>
<body>
    <p>This is a paragraph with a <span class="highlight">highlighted</span> word.</p>
    <div id="header">This is a header.</div>
</body>

부모 자식 관계

· 특정 태그가 다른 태그를 포함하는 구조
· 포함하는 태그가 부모, 포함되는 태그가 자식

 

부모 태그와 자식 태그의 동일한 속성에 대한 속성값이 다를 때

<header>
	<h1>Header h1</h1>
	<p>Header p</p>
</header>
header { color: red; }
h1 { color: blue; } /* 이게 우선으로 적용됨 */
p { color: green; }

 

· 부모 자식 관계 : <header>과 <h1>, <p>
· 형제 관계 : <h1>과 <p>

· 부모 태그와 자식 태그가 동일한 속성에 대한 서로 다른 속성값을 가질 경우 : 

  → 자식 태그는 부모로부터 상속받지 않고, 자신의 속성값을 가짐.

 

원하는 곳에만 css 속성을 적용하기 위해 부모를 구체적으로 표시

<header>
	<h1>Header h1</h1>
	<p>Header p</p>
</header>
<footer>
	<h1>Footer h1</h1>
	<p>Footer p</p>
</footer>
header { color: red; }
h1 { color: blue; }
p { color: green; }

이러면 h1 태그마다 모두 적용되므로, 부모 태그를 적어주어서 원하는 곳에만 적용되도록 함.

header { color: red; }
header h1 { color: blue; }  /* header에 있는 h1태그 */
header p { color: green; }

캐스케이딩

CSS의 우선순위를 결정하는 세 가지 요소 : 순서, 디테일, 선택자

 

순서

<p>Hello World</p>
p { color: red; }
p { color: blue; }

 

더 나중에 적용된 것이 우선순위가 높음.

 

디테일

<header>
	<p>Hello World</p>
</header>
header p { color: red; }
p { color: blue; }

더 구체적으로 작성된 선택자의 우선순위가 높음.

 

선택자

• style > id > class > type 순으로 우선순위가 높음

CSS 주요 속성 

<p class = "paragraph"> 문단이다! </P>
.paragraph { width: 500px; height: 500px; }
  • width 속성 : 선택한 요소 넓이 / 고정값(%), 가변값(px)
  • height 속성 : 선택한 요소 높이 
  • font-size : 글자 크기
  • font-family : 글꼴, 브라우저마다 지원하는 폰트가 달라서 여러 개를 기입하는 것이 좋음. 마지막은 sans-serif는 디폴트로 지정(모든 브라우저에서 지정 가능)
  • font-style : 글자 기울기
  • font-weight : 글자 두께, 100~900 사이 숫자 (100단위)
  • border-style : 테두리 (solid / dotted)
  • background-repeat : repeat-x(x축반복), repeat-y(y축반복), no-repeat
  • background-position : 공간 안에서 이미지 좌표 변경(to, bottom, center, left, right 등)
  • background-image : url(이미지 경로) / 여기서 url은 함수임

속성값 사이에는 순서가 없음. 사이에 공백 넣고, 맨 마지막에 세미콜론 쓰기

background: yellow url('elice_logo.png') no-repeat center;

◆ 웹사이트 레이아웃에 영향을 미치는 요소

박스모델

• margin : border 바깥쪽에서 왼쪽에 여백을 만듦 (left, right, top, bottom)
• padding : border 안쪽에서 여백을 만듦. 공간이 여백을 포함한 크기로 변경됨. (left, right, top, bottom)

<style>
	div { margin: 100px 0 0 100px; }
</style>

· top right bottom left 순서로 한 줄에 작성 가능

· 12시 시계방향 (top → right → bottom → left)

Block 요소와 Inline 요소

Block 요소 Inline 요소
<p>태그 <a>태그
줄바꿈 현상이 나타남 줄바꿈 현상 없음
width, height 값 사용 가능 → 공간 만들기 O width, height 값 적용 불가 → 공간 만들기 X
margin과 padding 값 사용 가능 → 상하 배치 작업 가능 margin, padding, bottom은 top, bottom만 가능함

마진 병합 현상

CSS에서 두 개 이상의 수직으로 인접한 블록 요소 간에 마진이 겹치는 현상

특정 상황에서 마진이 하나로 합쳐져서 더 큰 마진이 적용되는 현상

 

형제지간의 마진 병합 현상

<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>
.box1 { 
    margin-bottom: 150px; 
    border: 1px solid; }
.box2 { 
    margin-top: 100px; 
    border: 1px solid black; }

상식적으로 box1의 bottom과 box2의 top을 더한 값인 250px이 되어야 함.

하지만 여기서 더 큰 값인 box1의 마진값인 150px로 설정됨.

margin-bottom과 bottom-top 중 숫자가 큰 값으로 적용됨.

 

부모 자식간의 마진 병합

  <main role="main">
    여기서부터 메인의 시작
    <article>
      안녕하세요
    </article>
  </main>
article {
	width: 200px;
	height: 200px;
	margin-top: 100px;
    border: 1px solid black;
}

main {
    margin-top:50px;
}

 

여기서 부모태그인 main의 위쪽 여백이 50px이여야 하는데, 마진 병합 현상으로 자식태그인 article의 margin-top인 100px이 적용됨.

자식인 <article> 뿐만 아니라 부모인 <main>에도 영향을 미침.

레이아웃에 영향을 미치는 속성

display, float, clear

 

display

·block과 Inline 요소의 성격을 바꿀 때 사용
· inline-block을 사용하면 두 요소의 성격을 모두 가짐, 내비게이션 버튼을 만들 때 주로 사용됨.

p { display: inline; }
a { display: block; }
a { display: inline-block; }

 

float

· 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용
· 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것

· 왼쪽에서부터 정렬 : .left
· 오른쪽에서부터 정렬 : .right 

<div class = "left"> 왼쪽부터 </div>
<div class = "right"> 오른쪽부터 </div>
.left { float: left; }
.right { float: right; }

 

 

·  레이어가 겹쳐지지 않는 상태로 왼쪽(혹은 오른쪽)에서부터 정렬시키고 싶은 경우
→ float: left;(float: right;)을 연속적으로 입력 

<div class = "left"> 왼쪽부터 </div>
<div class = "next"> 이것도 왼쪽부터 </div>
.left { float: left; }
.next { float: left; }

 

clear

·  float에 대한 속성을 제어하고자 할 때 사용

·  float 사용하였으면 반드시 clear도 쓰기

clear
<header></header>
<aside class="left"> 왼쪽이당 </aside>
<main></main>
<aside class="right"> 오른쪽이당 </aside>
<footer></footer>
footer { clear: both; }  /* 양쪽 모두, 보통 both만 씀. */

float으로 왼쪽 오른쪽 양끝에 요소를 배치한 경우 : 그 다음 오브젝트는 그 아래가 아니라 그 뒤로 배치됨.
clear의 위치는 float을 마지막으로 사용한 지점의 바로 다음 태그에 사용.
위 예시에서는 </aside>의 다음부분인 <footer>에다가 clear값을 넣으면 됨.

 

브라우저와 공간 사이의 공백 제거하기

· <html>과 <body>태그는 margin과 padding값을 가지므로 초기화 해주어야 함.

· 둘 중 하나는 맨 위에 디폴트로 넣기

<style>
	html, body {
		margin: 0;
		padding: 0;
	}
</style>

*로 모든 html 태그 선택 가능 

<style>
* {
	margin: 0;
	padding: 0;
}
</style>

 

width 속성값을 소수점 5째자리까지 정밀하게 입력하는 이유
: 브라우저의 렌더링 엔진에 따라 미묘한 차이가 발생할 수 있기 때문임.

  • 브라우저마다 소수점 이하의 값들을 처리하는 방식이 다를 수 있으며, 정밀한 레이아웃을 위해서는 가능한 한 정확한 값을 입력하는 것이 좋음.
  • 레이아웃을 구성하는 요소들 사이에 공백이나 간격이 발생하는 경우가 있는데, 이를 최소화하기 위해 소수점 5째자리까지 입력하여 요소들 사이의 간격을 균일하게 맞출 수 있음.
  • 이러한 작은 차이가 큰 레이아웃 변경이나 반응형 디자인에 영향을 줄 수 있으므로, 정밀한 값을 입력하는 것이 권장됨.

* 엘리스측에서 블로그 작성 허락

 

허용 가능한 경우

• 본인이 직접 정리하여 글로 작성, 도식화, 이미지로 제작하는 경우

• 화면캡쳐본은 출처를 밝힌다는 조건 하에 일부 기재가 가능

 

허용 불가능한 경우

• 실습 코드를 기재하는 경우

출처 : 엘리스 sw트랙 기타문의 노션페이지

728x90