본문 바로가기
FRONT-END

[HTML&CSS] 웹 문서 기본 제작

by 로햐 2021. 12. 13.

Ⅰ. 웹

1-1. 네트워크

통신 기술로 논리적이나 물리적으로 그물망처럼 연결된 구조.

 

1-2. 인터네트워크

네트워크를 통해 연결된 컴퓨터들.

컴퓨터에는 가정용 컴퓨터 뿐만아니라 여러 정보 통신 매개체들도 포함.

웹, FTP, SMTP 등의 서비스가 포함된다.

 

1-3. 웹

웹 월드 와이드 웹 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간.

 

1-3-1. 웹 표준

HTML, CSS 등 규격을 W3C에서 정한다.

 

Ⅱ. HTML

2-1. HTML?

2-1-1 마크업 언어: 웹을 기술하듯 제작하는 언어. 

 

2-1-2. HTML : 마크업 언어 중에서 웹의 구조를 짜는 언어.

CSS : 웹의 디자인 요소를 적용하는 언어

JavaScript : 웹의 이벤트를 처리하는 언어

 

id / class / name / value

 

2-2. HTML 사용하기, 활용

  1. hr / br / &nbsp
  2. 제목 태그
    1. h1~h6
  3. 문단 태그
    1. p
    2. pre
  4. 글자 관련 태그
    1. 강조 : b / strong
    2. 기울임 : i / em
    3. 취소선 : s / strike
    4. 첨자 : sup / sub
    5. 큰, 작은 글씨 : big / small
    6. 형광펜 : mark
  5. List 아래 태그 안에 항목을 li태그로 넣는다.
    1. 순번이 없는 태그 : ul
    2. 순번이 있는 태그 : ol
  6. 테이블 
    태그 의미
    table 테이블을 구현
    caption 테이블 이름
    tr 테이블의 행
    th 테이블의 제목 행
    td 테이블의 열
    thead 테이블 구조를 3등분, 테이블 당 각 한개씩만 존재 가능
    tbody
    tfoot
    1. colspan / rowspan ; 열 들/행 들 합치기
  7. 구조 구획
    1. div : 한줄 단위로 구조 구획하는 태그. 블락형식
    2. span : 문장 단위로 구조를 구획하는 태그. 인라인 형식
    3. fieldset : 여러 태그를 하나의 테두리 안에 넣어주는 태그.
      1. legend : fieldset의 캡션
    4. iframe : 문서 안에 인라인으로 다른 html문서를 삽입.
  8. 미디어, 하이퍼링크
    1. img : 이미지 삽입
      1. alt="이미지 로딩이 안될 경우or보이스리더로 페이지를 읽을 경우 대체하여 출력할 글
    2. audio / video : 오디오/비디오 삽입
      1. autoplay : 자동재생
      2. controls : 컨트롤러
      3. loop : 반복
      4. poster : 섬네일
    3. a href= : 하이퍼링크 삽입
      1. target="_self"
      2. target="_blank" : 기본값
      3. rel="" : 관계 설명
  9. <form action="서버이름.do" method = "get / post">
    1. input(type별 분류) : 제출 시 key=value의 형태로 넘어간다. 
      속성 의미
      name key
      value value
      required 필수입력
      size input 입력 창의 길이
      maxlength 최대 입력 길이
      placeholder 입력 내용 안내
      type 입력 형식 지정. 표 아래는 type 속성에 따른 분류
      1. text : 텍스트 입력
      2. password : 비밀번호 입력 : ●으로 masking 되어있음
      3. search : 텍스트 입력은 똑같지만, input 창의 오른쪽에 위치한 x로 한번에 지울 수 있음. 
      4. 선택하기 : <label for="input의 id값">content</label> 해둘 경우 라벨을 체크해도 버튼에 불 들어옴
        1. radio : 하나만 선택
        2. checkbox : checked 속성을 넣어두면 무조건 체크된 상태로 시작.
      5. 버튼 : value="버튼에 출력할 글"
        1. button : 기본 버튼
        2. reset : 초기화 버튼
        3. submit : 제출 버튼 : form의 내용을 key=value의 형태로 서버에 전달함
      6. image : 이미지 삽입
      7. file : 파일 업로드
      8. 숫자 형식 : min / max / step(공차) / value(기본값)
        1. number : 숫자만 입력 가능한 창. 위아래 버튼으로도 조절 가능.
        2. range : 막대 형식
      9. hidden : 사용자에게는 보이지 않지만 전달되는 값을 기록하기 위해 사용하는 input type.
      10. 형식 지정
        1. tel
        2. url
        3. email : @의 형태로 나눠져있지 않으면 입력하라고 뜸
        4. phone
      11. 시간
        1. date
        2. month
        3. week
        4. time
    2. 목록
      1. select : name 속성 지정해줄 것.
        1. option 태그로 각 값을 지정하고, value 속성을 주지 않는 경우 content가 value로 넘어간다. selected가 있는 경우 기본값.
      2. datalist : 데이터 입력이 가능하고, 지정되어있는 값과 이전에 입력한 값의 목록을 띄워 선택할 수도 있다.
    3. textarea
      1. cols / rows : 한번에 들어갈 수 있는 글자 수
      2. style="resize=none;" : 사이즈 조절 못하게 막는 스타일
    4. button
      1. button
      2. submit
      3. reset

Ⅲ. CSS

@ : at 규칙. 해당 CSS문서의 기본 정보를 저장할 수 있다.

규칙명 의미
@charset "UTF-8" 문서의 형식을 UTF-8로 지정
@import url("...") 외부 스타일 시트
  1. 선택자
    1. 모든요소 : * 
    2. 태그 : 태그명
    3. class : .
    4. id : #
    5. 속성 선택자 [ ]
      = 해당 속성값을 가질 때
      ~= 특정 단어를 속성값으로 가질 때(띄어쓰기로 구분)
      |= 특정 단어를 속성값으로 가질 때("" 로 구분) 
      ^= 속성값이 특정 단어로 시작할 때
      $= 속성값이 특정 단어로 끝날 때
      *= 속성값이 특정 단어를 포함할 때
    6. 관계/반응/상태 선택자 : ':' 뒤에 선택자를 기술
      1. 구조 선택자
        1. 자손 a>b
        2. 후손 a b
        3. 동위 a+b : 바로 뒤에 오는 태그 1개 선택
      2. 반응 선택자
        1. active
        2. hover
      3. 상태 선택자
        1. checked
        2. focus
        3. enabled
        4. disabled
    7. 앞/뒤에 동일한 값 넣기 : ::before / ::after {content:"넣을 값";}
    8. { } : vscode emmet 플러그인 시 content를 작성
    9. $ : vscode emmet 플러그인 시 연속된 숫자를 지정
    10. 선택자 우선순위 : !important > 인라인 > 아이디 > 클래스> 태그
  2. 텍스트
    1. font-family : 폰트를 나열. 사용자의 환경에 있는 폰트를 적용. 없으면 다음 폰트로 넘어간다.
    2. font-size : px / % / em
    3. font-weigth : bold / bolder / lighter
    4. font-style : normal / italic / oblique
    5. color
      1. 색상명
      2. rgb / rgba : rgb 0~255 / alpha 0~1
      3. hsl / hsla : hsl 0~360 / alpha 0~1
      4. 16진수 #000000~#ffffff
    6. text-decoration : none / underline / overline / line-through
    7. text-align : left / center / right / justify
    8. text-shadow
    9. text-overflow : ellipsis / clip : content가 크기를 벗어나면 벗어난 내용을 어떻게 표시하나? '...'로 줄임/자름
    10. overflow : hidden / scroll : 크기를 벗어나면 스크롤을 표시할 것인가?
    11. direction : ltr /rtl : 글자 출력 방향. 
  3. 리스트 관련 :  블릿 기호 스타일
    1. list-style-type : none / disc / circle / square // decimal / lower(upper)-alpha / lower(upper)-roman
    2. list-style-position : inside / outside : 
    3. list-style-image : url(...) 불릿 기호 대신 이미지 적용
    4. 블릿 기호에만 색 넣기 
      #test-ul{
	list-style:none;
}
#test-ul>li::before{
	content:"o ";
	color : red;
}​
  4. background
    1. color : 색 지정. 지정하지 않으면 투명. 
    2. image : url("...");
    3. repeat : repeat / repeat-x / repeat-y / no-repeate
    4. position : top center / center / px 배경 이미지의 위치를 지정.
    5. attachment : fix / scroll : 고정방식 // fix : 스크롤의 움직임에도 반응하지 않고 화면에 붙어있음.
    6. clip : border-box(기본값) / padding-box / content-box
  5. 레이아웃
    1. display : none(완전히 사라짐) / block / inline / inline-box / flex / grid
      1. visibility: hidden; : 존재하는 상태로 보이지만 않게 숨기기.
      2. block/inline은 각 속성에 맞게 작동.
      3. inline-block은 inline인데 width/height/margin/padding/line-height 가능.
      4. flex(container) : 1차원으로 구역을 지정
      5. grid : 2차원으로 구역을 지정
    2. position : relative / absolute (해당 요소의 top-left가 영점. relative가 있다면 absolute는 relative를 따름)
      1. top / right / bottom / left 로 위치 지정 가능.
    3. z-index : 값이 클 수록 위에 위치하는 것
    4. float : none / left / right : 띄워서 정렬
  6. 영역 : 속성-위치-하위속성 형식으로 특정 방향만 조절 가능. 4개 나열 : 위부터 시계방향 / 2개 나열 : 상하, 좌우 
    1. width
    2. height
    3. border : 1px solid/dashed/double... red; 
      1. width : 두께
      2. style
      3. color
      4. radius
    4. box
      1. sizing : border-box / content-box(기본값)
      2. shadow
    5. padding
    6. margin
  7. transform
    1. transform-origin : 기준점 설정. 없다면 정가운데 
    2. 2차원 : 각 태그는 뒤에 X, Y를 붙여 축을 지정 가능
      속성 의미
      scale(1.5) 배율
      translate(50px, 100px) 이동
      rotate(15deg) 회전
      skew(50deg, -10deg) 비틀기
    3. 3차원 
      #test:hover{
	transform: perspective(500px) translate3d(10px, 20px, 30px);​
}
  8. 반응형 웹 : 미디어 쿼리 
    1. @media screen and (max-width:768px){
	#res{
		width:300px;
		height:500px;
		background:blue;
		padding:10px;
	}
	#ch1{
		width:300px;
		height:150px;
		display:block;
	}
	#ch2{
		width:300px;
		height:300px;
		display:block;
	}
}
  9. transition : 변형되는값 시간 linear / ease / ease-in / ease-out / ease-in-out
  10. animation : 
    @keyframes media-test{
	from{
    	초기값;
    }
    to{
    	변경할 값;
    }/*from-to 대신 0%, 50%, 100% 등으로 세분화하여 나눌 수 있음*/
}
#ani-test{
	값;
    animation-name:keyframes의 name;
    animation-duration: 지속시간
    animation-iteration-count: 반복 횟수
    animation-direction: 애니메이션이 어떤 방향으로 재생될것인가;
}​

Ⅳ. HTML Layout

3-1. HTML

3-1-1. div로 구역 분할

wrap header 헤더
container 내용물
footer 푸터

각 양식에 맞는 form, input들 적용

3-2. CSS 스타일 적용

길어지면 되도록 외부 스타일시트를 불러오는 방향으로 작성한다.

 

확인해볼것

3-5-1-3. inline-block에서 font-size : 0; vertical-align : middle; 해주면 여백 사라지는지.

'FRONT-END' 카테고리의 다른 글

[JSP] EL, 액션 태그, JSTL  (1) 2022.02.16
[JQuery] 기초  (3) 2021.12.28
[JavaScript] 기초  (4) 2021.12.22

관련글

티스토리툴바