천천히 차근차근

box-shadow: 2px 2px 2px 2px; box-shadow: 3px 3px 3px 3px; box-shadow: 4px 4px 4px 4px; box-shadow: 5px 5px 5px 5px; 각각 다르게 px을 적용해서 그림자 효과를 줄 수 있다. 박스가 조금 더 아름다워 보이는 효과 🤩

input 태그 자동완성 기능을 왜 해제하나요? 실무를 보거나 사이드 프로젝트를 만들다 보면 input 태그에 입력했던 값들이 필요치 않지만 지저분하게 조회되는 상황을 마주하곤 한다. input 태그 자동완성 기능 해제 방법 2가지 input 자동완성 해제 방법 2-1 input태그에 입력된 기록을 제거하는 방법은 아주 간단하다. Help. autocomplete="off" 속성을 사용해 주면 input 태그의 자동완성 기능을 해제할 수 있다. input 자동완성 해제 방법 2-2 또 다른 방법도 있다. input 태그가 포함되어 있는 form 태그에서 비활성화시키면 된다. Help. 자동완성을 해제하고자 하는 input 태그의 부모 요소인 form 태그에 autocomplete="off" 속성을 사용해..

Dom과 가상 dom DOM : Document Object Model Document : html 문서를 의미 html 모든 태그들은 node로 부터 상속 받는다. html 요소들은 기본적으로 node이다 라고 이해하면 된다.

a태그를 활용한 파일 다운로드 기능 사용법 html에서 a태그를 이용하여 손쉽게 원하는 파일의 경로를 지정하고 다운로드할 수 있습니다. a태그 작성법 테스트 문서 다운로드 작성한 a태그에 대한 설명 Help. 1. a태그를 사용해서 파일 다운로드 기능을 구현할 수 있다. 2. href="" 속성에 파일이 존재하는 실제 경로를 지정해 준다. (위 예시 코드 참고) 3. a태그의 download 속성을 사용한다. 4. 다운로드하는 파일의 파일명을 원본 파일과 다르게 지정하고 싶은 경우에 위의 예시 코드와 같이 download="테스트" 라고 입력해 주면 '테스트'라는 파일명으로 파일을 다운로드할 수 있다. 5. download="" 를 공란으로 비워두면 원본 파일명 그대로 파일을 다운로드 받을 수 있다. 참..

See the Pen by hyeryeonkim (@khr777) on CodePen.

나는 이전에 필요한 것이 있었는지, 구글에서 이미 Web Developer 앱을 설치해두었었다. 이 앱을 설치한 후, 😉 아래의 순서로 접속하면 내가 작성한 CSS의 유효성을 검토할 수가 있다. Tools를 클릭하고 Validate CSS를 클릭한다. 그러면 위와 같이 CSS 검사 결과, 발견된 오류가 없음을 확인할 수 있다🎅 아래와 같이 HTML도 검사할 수 있음을 참고하자!!!! 🎁

사이트에서 이미지를 표현하는 방법 2가지(기본 원칙) 📌 html img 태그로 표현(의미가 있을 때_없으면 이 사이트인지 모를 때) alt 태그 - 대체 문자 표현 📌 css background 속성으로 표현(의미가 없을 때_장식용) 대체 문자 필요 없음 🤗 요즘에는 이미지를 모두 background 속성으로 표현 웹 표준을 준수하기 위해서는 이 2가지 알고 지켜야 한다. 가상으로 대체 문자를 만들어줌(IR 효과) 이미지 스프라이트 효과 기법을 사용하면 img 용량도 줄어들고 편하다. IR효과 (웹 준수하여 CSS 사용하는 방법) ✅ 의미있는 이미지의 대체 텍스트를 제공하는 경우 이미지가 없으면 대체 텍스트가 제공되지 않는 것 같음 .ir_pm { display: block; overflow : hid..

position: fixed; margin: 0 auto; left: 0; right: 0; 🎈 위와 같이 입력하면 fixed를 화면 정중앙에 배치할 수 있다❗

.side_bar_box { top: 0; left: 0; right: 0; bottom: 0; display: flex; z-index: 999; position: fixed; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: transparent; transform: translate(-100%); transition: transform 0.2s; }transform: translate(-100%) 의미 : left에서 완전히 사라진다. JS $(function(){ $('.css-cnrrzv').click(function(){ //$(..

h1 태그 사용 횟수 h1 태그는 제일 큰 제목으로 한 페이지에서 한 번만 쓰인다. html에서 &(and) 사용법 &(and)는 코드에서 사용되는 것으로 오류가 날 수 있기 때문에 html 에서는 & amp;를 입력하여 사용한다. &만 입력해도 오류가 발생하지 않기도 하지만, 웹 표준에 맞춰 입력을 해주도록 한다. display 속성 block : 한 줄을 다 잡아 먹는다. inline : padding, margin이 적용되지 않고 요소들을 옆으로 나열한다. inline-block : padding이 적용되지만 margin은 적용되지 않는다. float: right; float: right; 를 사용하게 되면 좌, 우가 바뀌게 되는 문제가 발생한다. 이를 참고하여 display: inline-bloc..

📌 레이아웃 구조 복습 레이아웃 레이아웃 안에 레이아웃 컨테이너 header(nav, banner 등...) 박스(.header 클래스로 생성) 클래스 header 박스 안에 header 관련 클래스를 만들기 🛴 display 속성 block : 태그 한 개가 한 줄 영역을 모두 잡아 먹는다. inline : 태그의 텍스트만큼 영역을 잡아먹어 다른 요소들을 옆으로 나열한다. padding이 제대로 먹지 않는 문제가 있다. display: inline; 의 padding이 적용되지 않는 문제를 해결할 방법은? display: inline-block; 을 사용하자🚀 a 태그에 inline-block을 사용하면 padding이 제대로 먹는다. 그리고 a태그의 경우, display가 inline이기 때문에 a ..

📢 utf-8 전 세계 언어를 사용할 수 있도록 해주는 utf-8 을 사용한다. meta 태그 사용법 name="author" content="hye-ryeon, Kim" : 사이트 작성자 설명 name="description" content="웹 표준을 준수한 사이트 예제입니다." : 사이트 설명 name="keywords" content="웹, 웹표준, 웹접근성, 사이트 만들기" : 사이트 검색 키워드(정말 많은 사이트가 있으므로 다 검색이 되는 않는다.) name="generator" content="visual studio code" : 개발툴 link 태그 사용해서 css 적용하기 reset을 담당하는 파일을 우선순위에 두고 다른 css 파일을 불러야 한다. reset은 보통 *(전체 선택자)를..

Hello World! Hello World! Hello World! Hello World! 😶 rgba(255, 255, 255, 1.0) alpha 값은 0.0(완전 투명), 1.0(완전 불투명)

건강에 좋은 식품 블루베리 귀리 토마토 시금치 견과류 브로콜리 포도주 마늘 녹차 사과 🙄 기억하기 border-collapse: collapse; 중복되는 테두리를 한 줄로 표식을 하는 것

사용자 정보 이름 : 신청 과목 이 달에 신청할 과목을 선택하세요. 회화 문법 작문 🙄 기억하기 fieldset legend label input type="radio" radio checkbox를 사용할 때는 name을 모두 일치시켜야 한가지만을 선택하게 된다. value에는 서버에 전송할 데이터를 입력하도록 한다. input 속성 : disabled css 속성 : input:checked(선택된), input:disabled 위와 같이 css에서 사용할 수 있다. 컬러피커 크롬에서 컬러피커를 검색하면 CSS 색상을 아주 유용하게 사용할 수 있다.

1.선택자[속성] , 선택자[속성=값]-특정한 속성이 있는 태그 선택 img[alt] img 중에 alt 속성을 가진 것만 찾는다. input[type=password] input 중에 type이 password 인 것만 찾는다. div#header 아이디가 header 인 div 선택하는 같은 방법이다. div[id=header] div[id="header"] 2.선택자[속성~=값] , 선택자[속성|=값] -속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택(띄어쓰기 포함) img[alt~="test"] test 뒤에 띄어쓰기가 있는경우도 찾는다. test 앞에 띄어쓰기가 있는경우도 찾는다. img[alt|="test"] test 뒤에 - 있는 경우 찾는다. 3.선택자[속성^=값] , 선택자[..

input 속성 type을 number로 지정하고 pattern을 지정하면 숫자외의 입력을 제한할 수 있다.type="number"pattern="[0-9]"

상태 선택자 :checked : 체크 상태의 input 태그 선택 (checkbox 또는 radio) :focus :포커스를 맞춘 input 태그 선택 :enabled : 사용 가능한 input 태그 선택 :disabled : 사용 불가능한 input 태그 선택 :root HTML 전체를 의미

이용 안내 이용 요금 예약 방법 객실 소개

이름 지역 나이 홍길동 광주광역시 38 🛩 table은 자동으로 thead, tbody를 추가해주기 때문에 하위 선택자를 설정할 때, > 을 사용하면 적용되지 않음을 주의