# htmlcss
skip navigation
네비게이션 영역의 많은 링크들을 건너뛰고 바로 컨텐츠 정보를 탐색하기 위해 사용하는 용도예시>주의사항가능한 body태그 맨 처음 위치하는 것이 좋음가능한 처음에 한번만 사용하는 것이 좋음참조https://abcdqbbq.tistory.com/94https&#x

css/ transition 전환
전환 : 시간에 따른 속성을 지정하는 애니메이션 필수 속성 : 전환 속성값, 전환 시간 선택 속성 : 전환 타이밍, 전환 지연

[데이터 엔지니어링 데브코스] TIL 17일차 - 크롤한 데이터로 만들어보는 웹사이트(2)
핫 플레이스가 3개 미만일 때가 있다.=> 3개 미만인 경우 해당하는 핫플레이스만 표출지금 화면의 API가 Get method 하나만 있다.=> 댓글창을 추가하자. 댓글은 200자 제한하고 최근 댓글 3~4개만 표출이미지를 db에 저장할 것인가? 서버에 저장할 것인가?

css/ 미디어쿼리
화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는것<반응형 웹> @media(min-width:800px)min- 최소의 의미 / max 최대의 의미즉, screen > 800800보다 너비가 클때 = 최소한의 넓이가 800<

CSS/ slide 애니메이션
#1. css slide 애니메이션 적용하기 > 복습 flex box - 주축 정렬 button , a 태그 position 속성 - relative >새롭게 적용한 코드 position 속성 - absolute @keyframes - slide animation 태

HTML/CSS-01
뼈대, 장기: html겉 피부: cssctrl+b: 배너 옆으로head, body 등이 들어감body에 어떤걸 쓰느냐에 따라 달라짐.css->head안에 쓰게 됨이루어진 모든 것들 = "요소"html: 요소의 집합시작태그와 종료 태그로 이루어져 있고, 시작 태그와 종료

HTML, CSS로 이력서 만들기
1. Why HTML, CSS ? : 시각화 도구 중 가장 빠르고 간편하면서 완벽하고 보편적인 도구 호환성 - Javascript, python, ruby 같은 다른 성격의 언어와도 잘 섞여서 대신 예쁘게 표현해줌 (html, css가 없이 위 언어로 만들면 30년
1주차 위클리 페이퍼
1. CSS의 cascading에 대해 설명해 주세요 HTML 요소에 부여된 CSS의 속성들이 상위에서 하위로 상속되는Top -> Down 방식입니다. 우선순위에 결정 방법에 따른 부여입니다 예를 들어 id선택자, class선택자, tag선택자, 요소에 Direct로
앵커(Anchor)
HTML 문서 내에서 특정 요소로 직접 이동할 수 있는 링크사용자가 웹 페이지에서 특정 섹션 또는 요소로 쉽게 이동 가능페이지 내의 특정 위치를 가리키는 링크를 만들 때 사용문법
ARIA
ARIA웹 콘텐츠의 접근성 향상시키 위한 WAI-ARIA(Web Accessibility Initiative-Accessible Rich Internet Applications) 속성웹 콘텐츠 및 웹 애플리케이션의 접근성 향상시키기 위해 W3C(World wide Wb
HTML data 속성
data-(일반적인 데이터 속성)사용자 지정 데이터 속성을 정의하는데 사용javaScript 및 css에서 추가 데이터 저장 및 선택 가능javaScript를 사용하여 요소에 추가 정보를 저장, 처리 가능남용하면 코드 혼란시멘틱 태그를 대체하면 안됨data-toggle
단일 태그 표기법
단일 태그 표기법(self-closing tag notation) | 단일 태그 표기법 | 단일 태그는 내용을 포함하지 않거나 자체적으로 닫히는 태그로 표기하는 방법이다. |----------------------------|----------------- | 장점
value 속성
텍스트 입력 필드숨김 필드체크박스라디오 버튼사용자에게 양식에 대한 초기정보를 제공하는 유용페이지가 로드될 때 양식의 기본 상태 설정하는데 사용
form method 속성
form 속성GET : URL의 일부로 인코딩하여 서버에 전송, 주로 데이터를 가져올 때 사용POST : http요청의 본문에 포함하여 서버에 전송, 데이터를 생성하거나 변경할 때 사용PUT : 목적 리소스의 전체 표현을 요청 페이로드로 대체DELETE : 지정된 리소

[HTML/CSS] CSS 변환, transform
transform : 원근법 / 이동 / 크기 / 회전 / 기울임2D 변환함수translate(x,y) : 이동 x축,y축translateX(x) : 이동 x축translateY(y) : 이동 y축scale(x,y) : 크기 x축,y축rotate(degree) : 회전

[HTML/CSS] CSS 전환, transition
transition 요소 전환 효과를 지정하는 단축 속성. transition : 속성명 지속시간(필수) 타이밍함수 대기시간 // transition-property = 속성명 all 입력 시 모든 전환효과에 적용. 특정 효과만 적용 원하면 그거만 입력. ex) wi

[HTML/CSS] CSS flex
order : flex를 통해 배치되는 순서, 숫자가 낮을 수록 앞에 배치가 됨.flex-grow : item의 증가 너비 비율, 기본값 0flex-shrink : item의 감소 너비 비율, 기본값 1, 1인 경우 비율을 유지하기 위해 container 크기가 줄면

[HTML/CSS] CSS 표현 단위
업로드중..픽셀(px) 절대 단위(어떤 pc냐에 따라 상대적이긴 하나 보통의 경우 절대적) % 상대적 백분율 em 요소의 글꼴 크기 기준 rem 루트 요소(html 뿐 아니라 부모 요소의 설정에도 바뀔 수 있음.)의 글꼴 크기 기준 vw 뷰포트 가로 너

[HTML/CSS] 선택자 우선순위
같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법→ 점수가 높은 선언 우선.→ 점수가 같으면 가장 마지막 해석된 선언 우선.상속 - X전체 선택자(\*) - 0점태그 선택자(div, span 등) - 1점Class 선택자