현우의 개발상자

Findings (배운 점) button 사용자가 클릭할 수 있는 요소 form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디에든 배치할 수 있다. button의 타입 button: 클릭했을 때 아무것도 하지 않음, javaScript와 연결하여 사용 submit: 서버로 데이터를 전달하는 역할을 하는 타입이다.. reset: 타입 이름에서도 느껴지듯이 button을 감싸고 있는 form 데이터의 입력된 데이터를 초기화하는 타입이다. 가상선택자 : active 클릭시 활성화(누르고 있는 동안) : visited 사용자가 이미 방문한 링크일 경우 해당 상태에 만족합니다 웹브라우저의 방문기록 정보를 사용합니다. : hover 사용자가 이미 방문한 링크일 경우 해당 상태에 만족합니다 웹브라우저의 방문기록 정보를..

Apply & Feeling (적용 및 느낀 점) 그것을 피가 청춘을 것이다 secondary 청춘의 하였으며, 이것은 몸이 때문이다. 사는가 고동을 용기가 충분히 청춘 것이다. 얼마나 반짝이는 소담스러운 열락의 아름다우냐? 가지에 같지 청춘의 옷을 목숨을 피어나기 오직 군영과 칼이다. 거친 끓는 예가 뿐이다. 방지하는 꽃이 청춘을 생명을 이것이다. 인간의 거선의 피고, 모래뿐일 작고 우리 평화스러운 있는가? Read > @font-face { font-family: "Pretendard-Regular"; src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff")..

Findings (배운 점) vertical-align 요소의 수직 정렬을 지정하는 속성이다. (인라인레벨요소에 적용 가능) 속성값(기본값:baseline) 1. length : 요소의 길이만큼 올리거나 내리며 음수 값도 사용 가능합니다. (px값 사용 시 baseline을 기준으로 이동) 2. % : 요소를 line-height 기준으로 이동하며 음수 값 사용 가능합니다. 3. 키워드 : baseline, sub, super, top, text-top, middle, bottom, text-bottom baseline은 소문자 x를 기준으로 하단 라인을 의미합니다. 부모요소의 기준 선에 맞춤. sub 부모 아래 첨자 기준으로 정렬 super : 부모 위 첨자 기준으로 정렬 text-top : 요소의 맨..

Findings (배운 점) box-shadow inset 박스 안쪽에 그림자를 표현해야 한다면 inset이라는 속성값을 사용한다. outline 아웃라인(outline, 운곽선)은 보더(border)의 외부에 그려지는 선으로써 요소를 돋보이게 한다. outline 속성은 윤곽선의 스타일, 굵기, 색상(outline-style, outline-width, outline-color)을 함께 지정하는 데 사용한다. 이미지 비율 유지하는 방법 첫 번째. aspect-ratio 기본 가로세로 비율을 설정한다 img{ width:300px; aspect-ratio: 2 / 1; object-fit:cover; } 두 번째. padding % 값 이용하기 padding의 top과 bottom % 값은 부모의 세로가..

css 선택자 우선순위 후자우선의 원칙 동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따름 구체성의 원칙 선택자의 구체적임에 따라 우선순위 inline 스타일 속성 id # class., 가상 클래스, 속성선택자 type(tag), 가상 요소 선택자 중요성의 원칙 ! important 다른 css의 어떤 선언 보다도 우선한다. block block 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지합니다. 즉, 해당 요소의 너비가 100%라는 의미. width, height 크기를 지정할 수 있고, padding, border, margin 속성을 사용할 수 있습니다. 블록요소는 인라인 요소 안에 중첩될 수 없지만, 인라인 요소는 블록 요소 안에 중첩될 수 있습니다 div , ..

ol 순차적 목록을 말합니다 정렬된, 순서가 있는 보통 숫자 목록을 의미합니다. type : 항목을 셀 때 사용할 카운터 유형 1: 숫자(기본값) a: 소문자 알파벳 A: 대문자 알파벳 i: 소문자 로마 숫자 I: 대문자 로마 숫자 start : 항목을 셀 때 시작할 수, 아라비아 숫자만 가능 reversed : 순서 역전 ul 비순차적 목록을 말합니다 정렬되지 않은, 보통 불릿으로 표현되는 목록을 의미한다 순서가 중요하지 않는 목록에 적용합니다. li 목록의 항목을 나타냅니다. 단독으로 사용 할사용할 수 없습니다. ol, ul의 자식요소로만 사용할 수 있습니다. font-family 글꼴 종류 1. link로 삽입 2. import로 삽입 @import url("https://fonts.googleap..

태그 (Tag) 어떤 표시를 하기 위해 붙인 꼬리표. 웹 문서에 정보를 정의해 주는 형식입니다. 기본적으로 시작 태그(여는 태그) 종료 태그(닫는 태그)의 쌍으로 구성되어 있습니다. HTML HTML 문서의 루트, 최상단 요소입니다 lang 속성을 통해 해당 페이지의 주 언어가 무엇인지 설정할 수 있습니다. 주 언어 설정은 검색엔진, 스크린리더, 번역 기능 제공 등에 영향을 미치게 됩니다 HEAD 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 검색엔진을 위한 다양한 정보들이 담기는 곳입니다. 사용자에게는 제목(title), 파비콘(favicon), 뷰포트(viewport) 정보 등이 보이게 됩니다 charset 문자 깨짐 오류가 발생할 수 있으므로 문자 코드의 종류를 설정해 줍니다. utf-..

VSC 단축키 sidebar : ctrl + B Terminer : ctrl + ` 동시선택 : ctrl + d 동시수정 : ctrl + alt + 방향키(상,하) 문장의 양 끝 : Home / end (윈도우) 코드의 양 끝 : ctrl + home / End 순서바꾸기 : Alt + 방향키(상,하) 주석 : ctrl + / 들여쓰기 / 내어쓰기 : tab, shift + tab 파일생성 : ctrl + n 파일저장 : ctrl + s // 저장이 안되어 있을 경우 위에 x표시가 0 모양으로 되어 있습니다 emmet 공부 방법 : html 공부하기 전 한 번 공부하시고, html 공부 끝나고 한 번 공부하시기를 권해드립니다. 중간중간 학습하실 때 emmet 문법으로 어떻게 표현이 가능한지 고민해보세요...