HTML, CSS ?

프레첼·2023년 3월 1일

CSS html 개인정리

⚛️ Elice Track

목록 보기

2/4

📄 HTML

Hyper Text Markup Language

Hyper Text Markup Language

웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어

ex) 배너, 로그인, 내비게이션 ...

<!DOCTYPE html> 
- HTML5라는 문서를 선언하는 태그

<html> … </html>
- HTML문서의 시작과 끝을 의미

<head> … </head>
- 웹사이트의 간단한 요약 정보를 담는 영역
- 웹에 노출되지 않는 정보

<body> … </body>
- 웹사이트에서 눈에 보이는 정보를 담는 영역

<meta charset=“UTF-8”>
- 모든 문자를 표현하는 유니코드 UTF-8

<title> … </title>
- 웹사이트 탭에 나타내는 제목 태그


<img src =“test.jpg” alt=“로고사진”>
- 이미지 삽입
- src 속성 : 이미지 파일 경로
- alt 속성 : 웹사이트가 이미지를 출력하지 못했을 경우, 텍스트 정보로 대체


<h1> … </h1>
- 가장 중요한 정보를 담으므로, html문서당 한 번만 사용

<p> … </p>
- Paragraph의 약자 (문단)
- 본문 내용을 표현
- 웹사이트의 중요 정보를 담는 태그
- 긴 문장, 문단을 넣을때

<ul> … </ul>
- Unordered list의 약자
- 순서가 없는 리스트 생성
- 메뉴 버튼을 만들 때 사용



## 구조를 잡을 때 사용하는 태그
- header 웹사이트의 머리글을 담는 공간
- nav 메뉴 버튼을 담는공간 ul,li,a 함께 사용

🎨 CSS

Cascading Style Sheet

문서의 레이아웃, 스타일 정의

HTML로 작성된 정보를 꾸며주는 언어

CSS 연동 방법 3가지

1. Inline Style Sheet(인라인 스타일 적용)
<h1 style="color : red;"> title </h1>


2. Internal Style Sheet (인터널 스타일 적용)
<head>
	<style>
    	h1{ color : red; }
    </style>
</head>

3. External Style Sheet
  - .css 파일을 만들어 link태그로 연결방식
  -- html, css 분리하여 관리하기때문에 가독성이 높고 유지보수가 쉬움
  <head>
  	<link rel="stylesheet" src="index.css"/>
  </head>

⭐️ 웹사이트 제작시 고려할 사항 ⭐️

웹 표준성 : 공식 표준이나 기술적 규격

웹 접근성 : 장애의 여부와 상관 없이 모두가 웹사이트를 이용할수 있게 하는 방식

크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 작동하도록 하는 기법

프레첼

흐르는 대로 설명하기 && 틀리면 훈수 둬 주세요... 😊

이전 포스트

🏁 엘리스 SW 엔지니어 트랙 | 지원

다음 포스트

HTML, CSS ?

⚛️ Elice Track

📄 HTML

🎨 CSS

CSS 연동 방법 3가지

⭐️ 웹사이트 제작시 고려할 사항 ⭐️

🏁 엘리스 SW 엔지니어 트랙 | 지원

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

0개의 댓글