블로그

css를 만들다가 position 속성을 제대로 알지 못해 헤매어 알아보게 되었다. position에는 5가지 요소가 있다. static, relative, absolute, fixed, sticky. 각각의 배치 기준과 속성에 대하여 알아본다. position : static; 배치 기준 : HTML 문서 상에서 원래 있어야 하는 위치에 배정. HTML에 작성된 순서 그대로 브라우저 화면에 표시되는것을 뜻함 position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용. top,left,bottom,right의 속성값은 static일 때 무시됨. position : relative; 배치 기준 : 원래 위치를 기준으로 상대적(relative)으로 배치됨. position : absolut..

순서 없는 목록 태그 순서 있는 목록 태그 ul과 ol은 모두 li(리스트)를 가진다. ul ol ul이 가지는 특성 순서 없는 목록 태그 ol이 가지는 특성 순서 있는 목록 태그 불릿(bullet)기호를 없애고 싶으면 list-style-type:none; 으로 설정한다. div, ul을 html에서 많이 쓴다. li(리스트)를 가진다 css에서 menu를 hover 했을 때 sub가 보이게 하는 코드 .menu:hover .sub{ display:block;} 애니메이션 효과 section{ overflow:hidden;} /*section 영역을 넘어가지 않게 한다.*/ .tip div{ transition:all 0.5s;} /*css속성을 변경할 때 애니메이션 속도를 조절한다.*/ .back{ ..

태그 : 명령어 선택자 : 태그를 지정하는 옵션 선택자 종류 : class, tag block 요소 : 한 줄에 하나의 태그만 온다. (div, p, ul) inline 요소 : 한 줄에 여러 개의 태그가 온다. (span, img ) color 글자 색깔 font-size 글자 크기 1rem=16px text-align:center 가로로 중앙에 놓는다 line-height: 세로로 중앙에 놓고 싶을때 height와 크기를 똑같이 넣으면 된다. text-indent 텍스트 들여쓰기 외부스타일 div.box$*3 엔터를 누르면 ... 생성 float : 배치(정렬) 하는 명령어 span : 글자 태그 .(점) 안붙임 display: 화면 배치 방법 display: "none"; // 배치하지 않겠다. (..

1월30일부터 K-Digital Training을 수강중이다. 매일 배운 내용을 블로그에 적어보며 복습해본다. Html과 Css를 하기 위해서 먼저 에디터를 설치하였다. 에디터란 텍스트 파일을 편집할 수 있는 프로그램이다. MS에서 만든 Visual Studio Code를 설치한다. 그리고 확장프로그램으로 Live Server를 설치하여 실시간으로 프로그램 결과를 확인한다. // html5 웹표준 문서임을 알려줌 // html 시작 // 본문 내용 시작 // 본문 내용 끝 // html 끝 태그 : 사이에 사용하는 명령어 부모태그 : 상위에 있는 태그 자식태그 : 부모 태그 안에 있는 태그 손자태그 : 자식 태그 안에 있는 태그 형제태그 : 같은 레벨의 자식태그 : 줄 바꿈 태그 : 문장 태그 2줄바꿈 ..