HTML Day-2

html 요소

!DOCTYPE html

  1. HTML 문서의 선언
  2. HTML 버전 5를 나타냄

<html lang = "en">

  1. lang 속성은 웹 접근성에 관한 명시
  2. 스크린 리더에서 언어를 인식하여 자동으로 음성을 변환하거나, 한국어로 설정하려면 lang="ko"

태그 요소의 속성

속성은 해당 요소에 대한 추가적인 정보를 제공한다.

     <p class="my-P">
     <요소 속성명   속성값>

     속성에 대한 값은 따옵표를 꼭 사용하지 않아도 되지만, 
     속성값에 띄어쓰기가 있을 경우 문제가 발생할 수 있어서 따옴표를 쓰기 권장함.
     ("",'')

     <img src="./../main.jmg")>

meta 태그

     meta 태그는 <head> 태그에 정보를 추가하기 위한 태그 
   
     keywords, description 등 ...의 값을 설정

<meta charset-"utf-8">
charset 속성은 문자를 인코딩(해석)할 때 문자코드를 설정하는 역할을 설정.
우리나라 윈도우 기본 문자셋인 EUC-KR을 사용해도 되지만, 다국어 인코딩을 위해
UTF-8 문자셋을 사용하기를 권장한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport : 가상의 화면
모바일 최적화된 사이트에 포함하는 META 속성 설정(실제로는 우리가 CSS를 통해 설정해야함)

서식태그

< strong >

텍스트를 굵게 표현하고 싶을 때 사용 / <b>태그와 동일하나 접근성에서의 차이
strong태그는 접근성이 좋다(음성 강조 지원)

< em > (emphasized text)

텍스트를 이탤릭체로 표현하고 싶을 때 사용(글자 기울리기) / <i>태그와 동일한 기능
em태그가 웹 접근성이 좋다. (음성 강조 지원)

< mark >

텍스트에 하이라이팅(형광) 효과를 적용.
색상은 기본값인 노랑색이 적용되어 있으며 변경은 속성으로 변경해도 되며 css를 통해서 backgrond-color로 변경할 수 있다.

< del >(delete)

텍스트 중앙에 가로줄을 만들어 텍스트를 지운 것과 같은 효과를 줌
색상은 검정색이 기본이며 색상을 변경할 때 del 태그 자체를 색상을 변경하면 글자색도 같이 변한다. 개발자 의도에 따라서 글자는 검정 가로줄을 Red로 변경하고 싶으면 먼저 del태그안에 span 태그를 넣어 del태그의 색상은 red, span 태그의 색상은 검정으로 적용하면 되겠다.

< ins >(insert)

텍스트 및에 선을 그어 텍스트의 강조효과를 줌
색상 변경 방법은 del 태그와 동일.

< sup > (superscript)

10²(10의 제곱) 과 같이 위첨자를 표현할 때 사용한다.

< sub > (subscript)

H₂(수소) 와 같이 아래첨자를 표현할 때 사용한다.

목록태그

< ul > (Unordered List)

순서가 없는 목록 태그(점으로 목록을 표시) 

<ul>
	<li>내용1</li>
    	<li>내용2</li>
    	<li>내용3</li>
    .....
</ul>

표시 내용(기본 값)

  • 내용1
  • 내용2
  • 내용3

style을 활용하면 앞의 표기법을 바꿀 수 있다.
list-style-type : none(불릿 없애기) | circle(빈원) | square(사각형)
또는 인라인 스타일에서 type = "속성명" 설정

< ol > (Ordered List)

순서가 있는 목록 태그(기본값은 숫자가 생김)
type에는 1, A, a, I, i 가 들어 갈 수 있으며 순서의 표시를 변경할 때 쓰인다.
start에는 시작순서가 들어가고 숫자로면 표현한다.

<ol type = "a" start ="2">
	<li>내용1</li>
    	<li>내용2</li>
    	<li>내용3</li>
	....
</ol>

표시내용
b. 내용1
c. 내용2
d. 내용3

위의 표기는 인라인으로 설정한 타입들이다.
좀 더 많은 설정을 하고 싶으면 style을 따로 만들어 사용한다.
list-style-type : 속성 값

속성값 설명
decimal 1로 시작하는 십진수
decimal-leading-zero 앞에 0이 붙는 십진수(01, 02....)
lower-roman 소문자 로마 숫자(i,ii, iii....)
upper-roman 대문자 로마 숫자(I, II, III ....)
decimal 1로 시작하는 십진수
lower-alpha 소문자 알파벳
upper-alpha 대문자 알바벳

심지어 위의 불릿 말고 사용자 지정 이미지를 넣을 수 있다.

<style>
  ul{
list-style-image : url('./경로')
}
</style>

목록에 들여쓰는 효과 내기
list-style-position :
inside : 불릿이나 숫자를 안쪽으로 들여 쓴다.
outside : 기본 값으로 불릿이나 숫자를 밖으로 내어 쓴다.

< dl > (Definition List 또는 Description List)

사용자 정의 목록태그, 설명 태그라 한다.
dl,dt,dd는 1:1로 쌍을 이룰때 사용하는 것을 권장하며 그 내용이 정의, 설명하는 논제일 때 사용하는 것이 적합하다. 현실은 목록화 되어 있으면 남발하여 사용되고 있다.. 국외와 협업할 때는 이러한 점들이 간혹 문제가 되기도 한다.

첫번째 목록은 <dt> 첫번째 목록에 대한 설명들은 <dd>

  <dl> 
	<dt>설명 제목1</dt>
    		<dd>설명 1 </dd>
    		<dd>설명 2 </dd>
        	<dd>설명 3 </dd>
    	<dt>설명 제목2</dt>
    		<dd>설명 1 </dd>
    		<dd>설명 2 </dd>
            	<dd>설명 3 </dd>
        <dt>설명 제목3</dt>
    		<dd>설명 1 </dd>
    		<dd>설명 2 </dd>
            	<dd>설명 3 </dd>
  </dl>

이미지

비트맵 이미지

픽셀이 모여 만들어진 정보의 집합, 레스터 이미지라고 부름
픽셀 단위로 화면에 렌더링함. 그림판, 포토샵 등 툴로 편집한다.

벡터 이미지

방향과 크기를 나타낸다. 수학적 정보의 형태들이 만들어내는 결과물 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보 등을 가지고 있다.
확대 및 축소를 해도 이미지가 깨지지 않음. 일러스트 같은 툴로 편집한다.

이미지 파일 종류

jpg

압축률이 훌륭하여 사진이나 예술분야에 많이 사용
가장 널리 쓰이는 이미지 포맷
표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합
손실 압축임...

gif

이미지 파일 내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
8비트(256색상) 컬러만 지원
비 손실 압축

png

gif의 대체 포맷으로 개발
8비트, 24비트 컬러 이미지 처리
w3c 권장 포맷
알파 채널 지원(그라데이션 기능 등.)
움짤이 가능하다

webp

jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
gif 같은 애니멧이션 지원
알파 채널 지원(손실, 비손실)
완벽한 포멧
움짤이 가능하다
최신 브라우저만 기능을 지원하여 호환성이 아직 부족하다.

이미지 태그

이미지를 띄우기 위한 태그이다.
인라인 태그
<img> 닫는 태그 없이 사용가능
<img src = "이미지가 위치하는 주소 또는 경로" alt="대체할 문자열">

파일 경로

절대 경로

고유한 전체 경로
http, https, file에 대한 경로(file 경로는 사용하지 않음)
ex) C:\Users\km253\OneDrive\바탕 화면\frontend\1400_FE_lkm

상대경로

	  이미지가 HTML문서와 같은 폴더에 있는 경우
                <img src = "파일명.확장자">, <img src="./파일명.확장자">
          이미지가 하위 폴더에 있는 경우
                <img src = "폴더명/파일명.확장자">, <img src = "./폴더명/파일명.확장자">
          이미지가 상위 폴더에 있는 경우
                <img src = "../파일명.확장자">, <img src = "./../파일명.확장자">
          이미지가 상위 폴더의 하위 폴더에 있는 경우
                <img src = "../폴더명/파일명.확장자">,<img src = "./../폴더명/파일명.확장자">

이미지 속성 변경 방법

< img src "../폴더명/파일명.확장자" width="200" height="200" >
가로 200 세로 200 크기의 이미지로 설정

[알고리즘] 백준 2630 색종이 만들기
TIL 2021.03.13

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage