끄적끄적 코딩일지

Html 기본 요소 본문

Javascript&Web

Html 기본 요소

BaekGyuHyeon 2022. 3. 21. 18:45

구역

<div> : 구역을 구분하는 Tag,

<p> : 문단을 구분하는 Tag, 가로정렬

 

목록

<ul> : 순서가 없는(사용자 정의대로) 목록 표시

<ol> : 순서가 있는 (숫자, 알파벳) 목록 표시

<dl> : 요소와 요소를 설명하는 목록 표시

<li> : 목록의 요소 표시

 

글자

<h1> ~ <h6> : 글자 표시, 숫자가 작을수록 폰트 크기가 커짐

<span> : 특정 글자를 꾸밈

<a> : 하이퍼 링크

입력

<input> : 광범의한 사용자의 입력, type에 따라 입력하는 데이터 선택 가능

    - 기본 : 글자 입력

    - number : 숫자 입력

    - button : 버튼 표시

    - checkbox : 체크 박스

    - color : 특정 색 선택(html5)

    - date : 날짜 선택(html5)

    - datetime-local : 날짜,시간 선택(html5)

    - file : 파일 선택

    - 더 자세한 정보는 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input 참고

<button> : input의 type button 표시

<textarea> : multiline이 지원되는 글자 입력

 

 CSS

background-image : 배경에 이미지 표시

          - url : 이미지 url 정의

          - rgba : 투명도 값을 포함한 rgb 표시, 입력값 (red값,green값,blue값,투명도값)

          - gradient : 색의 변화를 정의, 입력값 (각도 or 방향,시작색,변화색) 

               - linear-gradient : 선형 그레디언트

               - radial-gradient : 반지름형 그레디언트

               - repeating-gradient : 반복형 그레디언트

background-position : 표시할 이미지의 위치 입력값(왼쪽 여백값,위쪽 여백값)

background-size : 배경 이미지의 크기 설정

          - contain : 이미지가 잘리지 않는 한도 내에서 제일 크게 설정.

          - cover : contain과 똑같지만 빈 공간이 생기지 않도록 크기 설정

          - auto : 원본 크기 유지

width : 가로 크기

height : 세로 크기

border-radius : 태두리를 둥글게 조절

margin : 원본의 여백 설정

padding : 내부 요소의 여백 설정

 

Bootstrap

다른 사람이 만든 css 를 사용하는것 참고

사용 방법및 자세한 내용은 boostrap 홈페이지 참고

 

Javascript

 html 내에서 동작을 제어하기 위한 언어

'Javascript&Web' 카테고리의 다른 글

Javascript에서 Cookie, SessionStorage 사용하기  (0) 2022.05.12
JQUERY 시작하기  (0) 2022.03.22