개발로그 개발로그

nav 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용 #값과 이동하길 원하는 곳의 id값이 같아야 함 Features How It Works Pricing navbar ul/ li 제발 설정해... // html //CSS ul{ list-style: none;} >> 정렬 . 없애줌 .navbar{ display: flex; justify-content: flex-end; } >> 오른쪽 끝으로 Social-icons 사진 누르면 링크 이동 안에 img 태그 걸기 #navbar 항상 위에 위치 // html About Us Demo Photo Gallery Contact // css header { position: fi..

:root 가상클래스, 웹 문서 구조에서 특정 위치에 있는 요소를 선택, 웹 문서상 가장 상위 요소를 선택/공통으로 사용될 속성 적용 /* 문서의 루트 요소 선택 HTML에서는 */ :root { background: yellow; } :root { --main-color: hotpink; --pane-padding: 5px 42px; } https://developer.mozilla.org/ko/docs/Web/CSS/:root :root - CSS: Cascading Style Sheets | MDN CSS :root 의사 클래스는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 요소이므로, :root의 명시도가 더 높다는 점을 제외하면 html 선택자와 똑같습니다. developer.mo..

transform element 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여 / 좌표 공간을 변경 transform: matrix(1, 2, 3, 4, 5, 6); transform: translate(120px, 50%); transform: scale(2, 0.5); transform: rotate(0.5turn); transform: skew(30deg, 20deg); transform: scale(0.5) translate(-100%, -100%); https://developer.mozilla.org/ko/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDN CSS transform 속성으로 요소에 회전, 크기 조절..

nav 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용 #값과 이동하길 원하는 곳의 id값이 같아야 함 Features How It Works Pricing input type="submit" 글자 바꾸기 value=" 바꿀 이름 " input data 서버에 전송하기 action="전송할 서버 url" ... video 임베드 https://okayoon.tistory.com/entry/%EC%95%84%EC%9D%B4%ED%94%84%EB%A0%88%EC%9E%84iframe

Referer / HTTP header 서버는 referer를 참조함으로써 현재 표시 하는 웹페이지가 어떤 웹페이지에서 요청되었는지 알수 있으며, 어떤 웹사이트나 웹서버에서 방문자가 왔는지를 파악할수 있는 기능을 referer 를 통해 할수 있다. Referer: https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-HTTP-referer-%EB%9E%80 [WEB] 📚 HTTP referer 란? HTTP Referer(레퍼러) referer는 http 헤더중 하나이다. HTTP 프로토콜에는 referer 라는 헤더값이 있는데, 브라우저가 서버로 이 헤더값을 설정해서 보내게 된다. 서버는 referer를 참조함으로써 현재 표시 inpa.tistory.com https:/..

aria-hidden element 콘텐츠를 숨기는 다른 방법은 하기와 같다. https://yceffort.kr/2021/03/hiding-contents-with-html-and-css Home yceffort yceffort.kr caption element 테이블의 캡션(caption, 테이블이나 사진, 삽화 등에 붙는 설명)을 정의 요소는 단 하나의 요소만을 명시할 수 있으며, 요소는 언제나 요소 바로 다음에 위치 분식 밥류 면류 분식류 table element head : thead body : tbody style.css에서 element 중 특정 class 고르기 span[class~="sr-only"] span[class~="sr-only"]{ border: 0; } clip 요소의 특정..

label for 속성 쓸 때, id 값이랑 같은 값 줘야한다~ radio 버튼 하나만 누를 수 있도록 에 name=" " 넣어주기 CSS 가상요소 선택자 ::before -- 추가 공부 필요 홈페이지 header 나 footer에 구분선을 삽입할 때 사용 선택자 :: 가상요소 {속성 : 속성 값;} p:before{ content: "Question #" } p::before { content: ''; /* 빈 컨텐츠 표시 */ } p::before { content: '문단 맨 앞에 텍스트 표시'; } p::before { content: '👨🏽‍💻'; /* 이모지 */ } p::before { content: '\0244'; /* 캐릭터 코드 */ } https://goddino.tistory.co..

nav 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용 HTML | CSS | JavaScript INFO HTML CSS aspect-ratio 이미지 비율 설정 (가장 최신 방법) aspect-ratio: 35 / 4; > 35:4 비율로 고정 https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B9%84%EC%9C%A8-%EA%B3%A0%EC%A0%95%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-aspect-ratio [CSS] 📚 이미지 비율 고정하는 최신 방법 - aspect ratio 🎨 aspect ..