본문 바로가기

분류 전체보기

 (207)
링크(anchor) 사용자가 링크를 클릭하면 현재 있는 페이지의 다른 부분으로 이동하거나 아예 다른 페이지를 보여주고 싶을 때 !반드시 사용해야할 속성: href (hypertext reference) - hypertext는 html 문서, 웹 페이지를 의미 - reference는 주소값. - 즉, 새로 띄우고자 하는 웹 페이지의 주소를 넣어주면 된다. href 속성(attribute)에 들어갈 값(value) 1. 다른 웹페이지 URL SEARCH 2. 내가 작성하고 있는 다른 html문서 ABOUT 3. 특정 id 값을 가지고 있는 웹페이지 내의 섹션 hello 섹션으로 이동 4. 메일쓰기 메일쓰기 5. 전화걸기 전화걸기 * 새 탭에서 열기 새 탭에서 열기
제목, 문단, 강조 제목(heading): h1~h6 문단(paragraph): p 강조(emphasis): em, strong - 둘 중에서 쓰고 싶은 것 사용. -브라우저에게 "여기는 중요한 파트야~"라는 메시지를 준다. - 스타일은 나중에 CSS로 바꾸면 된다.
HTML Tag 공부의 시작 ⛳ 목표 자주 사용되는 태그(tag)의 종류와 각 태그가 필요로 하는 속성(attribute)를 기억한다.
position:absolute;의 기준점 부모는 position:static만 아니면 된다. position:absolute의 기준점이 되는 요소는 position: relative, absolute, fixed, sticky 다 가능. position: static만 아니면 된다. 참고 developer.mozilla.org/en-US/docs/Web/CSS/position position The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. developer.mozilla.org
모달(modal) viewport 중앙에 위치 시키기 body{ width:100%; height:100vh; } .modal{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
input, button 못생긴 테두리 없애기 input, button{ border:none; /*border-radius:4px 가능 */ } input:focus, input:active, button:focus, button:active { outline: none; box-shadow: none; }
position:absolute인 요소를 수직 정중앙에 배치하기 .parent{ position:relative; } .parent .child{ position:absolute; top:50%; transform:translateY(-50%); } 기준점 삼고 싶은 부모 요소에 position:relative를 준다. 그 부모 요소의 수직축 기준으로 정중앙에 위치시키고 싶을 때, position:absolute;를 주고 top:50%;를 주면 부모의 height기준 정중앙인 지점부터 시작해서 자식 요소가 배치된다. 그러면 내가 원하는 위치보다 child 요소가 아래로 내려가있는 것을 확인할 수 있다. 이 문제를 해결하기 위해서 사용하는 속성이 transform이다. transform에는 rotate, scale, translate 같은 함수가 와서 원하는 요소를 회..
부모 요소(element) 속 이미지 크기 맞추기 부모 요소(element)의 width를 설정해도 이미지는 자체 width와 height가 있기 때문에 이미지는 (거의 항상) 부모 박스를 삐져나온다. 이때 자주 쓰는 CSS 속성 조합은 .parent{ width:400px; } .parent img{ display:block; width:100%; height:auto; } 이렇게 부모 element에 원하는 너비를 준다. img는 inline요소이긴 하지만 원래 자체 너비와 높이가 있어서 높이, 너비 조정이 가능하지만 좀더 정확성을 기하기 위해서 display:block을 준다. 그 후에 width:100%를 주면 부모 요소의 너비의 100%를 차지하고 height:auto를 주면 원래 이미지가 가지고 있던 비율에 맞춰서 자동으로 높이가 조절된다.

티스토리툴바