영벨롭 개발 일지

[position 속성과 같이 사용하는 css 속성들] position 속성은 요소의 위치를 지정하는 기준을 지정하는 속성입니다. 속성 값 설명 static 기본 값, 기준 없음 relative 요소 자신을 기준 absolute 위치 상 부모 요소를 기준 fixed 뷰포트를 기준 position 속성과 같이 사용하는 css 속성들은 다음과 같습니다. 속성 설명 top, bottom, left, right 요소의 각 방향별 거리 지정 z-index 요소의 쌓임 정도를 지정 [relative 속성 값] relative 속성 값은 요소 자신을 기준으로 배치합니다. position: relative; 만을 적용하면 배치 전과 동일하지만, top, bottom, left, right 속성과 함께 사용하면 배치 전..

[요소의 배경 이미지 삽입 background-image] background-image는 해당 요소의 배경에 이미지를 삽입하는 속성입니다. 기본형 background-image: url("이미지 경로"); #bgImage { background-color: orange; width: 300px; height: 300px; background-image: url("./images/tisotry.png"); } [배경 이미지의 크기 background-size] background-size는 배경 이미지의 크기를 지정하는 속성입니다. 속성 값 설명 auto 기본값, 이미지의 실제 크기 단위 px, em, rem, ... cover 비율은 유지하고 요소의 더 넓은 너비에 맞춤 (이미지 짤릴 수 있음) con..

글꼴을 제어하는 속성들 - 크기, 두께, 기울기, 높이, 글꼴 글자의 크기 font-size font-size 속성은 글자의 크기를 지정하는 속성입니다. 따로 지정하지 않았을 때의 기본 글자 크기는 16px 입니다. 속성 값 설명 16 px 기본 값 단위 px, em, rem, ... % 부모 요소의 글자 크기를 기준으로 백분율 글자의 두께(가중치) font-weight font-weight 속성은 글자의 두께를 지정하는 속성입니다. 기본 두께는 400입니다. 속성 값 설명 normal 400, 기본 값 bold 700, 두껍게 bolder 부모 요소보다 더 두껍게 lighter 부모 요소보다 더 얇게 100 ~ 900 숫자 값 글자의 기울기 font-style font-style 속성은 글자의 기울기를..

넘침 제어 overflow 속성 overflow 속성은 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성입니다. 예를 들어 부모 요소의 영역의 크기보다 자식 요소의 영역 크기가 클 때, 부모 요소에 overflow 속성을 사용하여 자식 요소의 내용을 잘라낼 수 있습니다! 개별 속성으로 overflow-x와 overflow-y 가 있습니다. 속성 값 설명 visible 기본값, 넘친 내용을 그대로 보여줌 hidden 넘친 내용을 잘라냄 scroll 넘친 내용을 잘라내고 스크롤바 생성 (가로, 세로 스크롤바 자동 생성) auto 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 visible hidden scroll auto .parent { width: 200px; height: 100..

박스 테두리 선 border border 속성은 박스 요소의 테두리 선을 지정하는 단축 속성입니다. 테두리를 추가하게 되면 padding과 마찬가지로 요소의 크기가 커집니다! 기본형 border: 선두께 선종류 선색상; 선 두께 border-width border-width 는 테두리 선의 두께를 지정하는 속성입니다. border-width도 단축 속성이기 때문에 margin/padding 과 마찬가지로 값을 하나만 줄 수도, 여러 개를 줄 수도 있습니다. border-width: 상하좌우 border-width: 상하 좌우 border-width: 상 좌우 하 border-width: 상 우 하 좌 속성 값 설명 medium 중간 두께, 기본 값 thin 얇은 두께 thick 두꺼운 두께 단위 px, ..

왜 시맨틱 태그로 레이아웃을 만들어야 할까? 웹 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않더라도 웹 문서를 만들 수 있지만, 실제로 웹 브라우저에서 문서를 처리할 때는 매우 큰 차이가 있습니다. 시맨틱 태그로 작성한 소스는 태그만 보고도 어느 부분이 제목이고 메뉴이고 실제 내용인지 쉽게 알 수 있습니다. 이렇게 소스만으로도 문서 내용을 알 수 있으면 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있어 편리합니다. 그만큼 사이트 내용을 정확히 전달할 수 있고, 태그에 대한 역할이 정확히 정해졌기 때문에 어떤 장치에서든 문서를 똑같이 해석할 수 있습니다. 태그 - 머리말 지정 태그는 특정 부분의 머리말에 해당하며 사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입합니다. 또한 본문 중에 ..