그럼에도 불구하고

Start! 🧑🏻‍💻 DOCTYPE은 무엇을 하나요? DOCTYPE는 document type의 약어입니다. DOCTYPE는 항상 DTD(Document Type Definition)와 관련됩니다. DTD는 특정 문서가 어떻게 구성되어야 하는지 정의합니다. (예시: button은 span을 포함할 수 있지만, div는 그럴 수 없다.) 반면, DOCTYPE는 문서가 대략 존중할만한 DTD를 선언합니다. 웹 페이지는 DOCTYPE 선언이 필요합니다. 유저 에이전트에게 문서가 존중하는 HTML 사양의 버전을 알리는 데 사용됩니다. 유저 에이전트가 올바른 DOCTYPE을 인식하면, 문서를 읽는 데에 DOCTYPE과 일치하는 no-quirks mode를 트리거합니다. 유저 에이전트가 올바른 DOCTYPE을 인식..

자주 사용하는 form 태그와 input 태그의 타입을 정리해보자 [ form에서 사용하는 태그 ] 종류 설명 폼의 시작과 끝을 만든다. 폼 요소를 그룹으로 묶는다. 필드셋에 제목을 붙인다. 사용자가 내용을 입력할 필드를 삽입한다. , 드롭다운 목록을 삽입한다. 텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입한다. 데이터 목록을 삽입한다. [ input 태그의 유형 ] 종류 설명 text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 생성 password 비밀번호를 입력할 수 있는 필드 생성 search 검색할 때 입력하는 필드 생성 url URL 주소를 입력할 수 있는 필드 생성 email 이메일 주소를 입력할 수 있는 필드 생성 tel 전화번호를 입력할 수 있는 필드 생성 checkbox 주어..

오늘은 table을 만들어보자 [ 표의 구성 요소 알아보기 ] 표(table)는 행(row)과 열(column) 그리고 셀(cell)로 이루어진다. 셀은 행과 열이 만나 이루어진 것으로 표의 내용이 들어가는 한 칸을 의미한다. [ 표 ] 4행 3열짜리 표 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 3행 1열 3행 2열 3행 3열 4행 1열 4행 2열 4행 3열 [ 표를 만드는 태그 ] 표의 시작과 끝을 알려주는 과 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다. 여기서 표에 제목을 붙이고 싶다면 태그 바로 아랫줄에 태그를 사용한다. 태그를 사용하면 제목은 표의 위쪽 중앙에 표시된다. 표 제목 [ 행을 만드는 태그와 셀을 만드는 , 태그 ] 태그만 작성하면 표가 만들어지지..

여러 가지 shadow를 이용해보자 HTML HTML 삽입 미리보기할 수 없는 소스 결과 HTML 삽입 미리보기할 수 없는 소스

가로 / 세로 메뉴바를 만들어보자 [ 가로 상단 메뉴바 ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스 [ 가로 상단 메뉴바 (모든 메뉴 나오게) ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스 [ 세로 상단 메뉴바 ] HTML 삽입 미리보기할 수 없는 소스 [ 결과 ] HTML 삽입 미리보기할 수 없는 소스

이미지에 커서를 갖다 대면, 그 위로 글을 띄워보자 test.html Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore expedita dolorum recusandae. Corrupti libero dolores aperiam architecto unde, voluptas ipsum reiciendis accusantium! Eos provident in consequuntur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore e..

여러가지 transform을 이용해보자 test.html box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box16 box17 결과 HTML 삽입 미리보기할 수 없는 소스

EL에 대해 알아보자 [ EL : Expression Language) ] View를 위한 데이터 추출 표현식 우선, EL을 사용하기 전에 java file과 jsp file로 값을 출력해보자 spag.java package com.zenghyun.web; import java.io.IOException; import java.util.HashMap; import java.util.Map; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.ser..

여러 가지 transition을 사용해보자 code box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box01 : 기존 width 200px의 두배인 400px만큼 채워짐 box02 : span의 지정색인 pink가 빠지고 darkcyan 색이 보임 box03 : box color -> black / font color -> white로 변경 box04 : height 10px만큼 채워짐 box05 : width 60px만큼 채워짐 box06 : 애니메이션 지연시간 2초 줌 box07 : 좌측 상단부터 우측 하단까지 채워짐 box08 : width 100%를 기준으로 채워짐 box09 : he..

css에서 opacity와 transition-duration 속성을 이용해보자 code inner opacity는 투명도를 의미한다. 0: 보이지 않음 1: 보임 위의 코드에서는 inner 박스의 투명도를 0으로 지정해두어 박스가 보이지 않는다. .box:hover .inner.box { opacity: 1; } . box에 마우스 커서를 놓으면 inner박스의 투명도를 1로 바꾼다. transition-duration: 1s;: 애니메이션이 실행되는 시간을 1초로 지정한다.

CSS에서 flex-direction 기능을 사용해보자. flex-direction: row item1 item2 item3 item4 item5 flex-direction: row-reverse item1 item2 item3 item4 item5 flex-direction: column item1 item2 item3 item4 item5 flex-direction:column-reverse item1 item2 item3 item4 item5 column 상태에서 justify-content:flex-start item1 item2 item3 item4 item5 column 상태에서 justify-content:flex-end item1 item2 item3 item4 item5 flex-dire..

CSS 속성 중에 justify-content를 사용해보자 Code justify-content:flex-start item1 item2 item3 item4 item5 justify-content:flex-end item1 item2 item3 item4 item5 justify-content:center item1 item2 item3 item4 item5 justify-content:space-between item1 item2 item3 item4 item5 justify-content:space-evenly item1 item2 item3 item4 item5 justify-content:space-around item1 item2 item3 item4 item5 현재. container css..