06.24(display & 화면에서 요소 감추기)
2020. 6. 24. 21:39
프로그래밍/CSS
display 속성 설명 block 선택한 요소를 block 레벨 요소로 나타냄 width/height적용, align적용 X inline 선택한 요소를 inline 레벨 요소로 나타냄 width/height 속성이 무시되고, content에 의해서 크기가 결정됨 inline-block 선택한 요소를 inline-block 레벨 요소로 나타냄 none 선택한 요소를 나타내지 않음 block 레벨 요소 항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지함 또한 width 속성 값을 부여해주면 그 너비만큼의 영역을 차지 inline 레벨 요소 새로운 라인에서 시작하지 않으며 다른 요소들과 같은 줄에 배치 될 수 있고 content의 너비만큼의 영역을 차지 또한 width, heigh..
06.23(background)
2020. 6. 23. 20:38
프로그래밍/CSS
background ① background-color ② background-image ③ background-repeat ④ background-position ⑤ background-attachment background 속성 속성 설명 background 모든 background 속성을 이용한 스타일을 한 줄에 설정 background-color HTML 요소의 배경색을 설정 background-image HTML 요소의 배경 이미지를 설정 background-repeat 설정된 배경 이미지의 반복 유무를 설정 background-position 반복되지 않는 배경 이미지의 상대 위치를 설정 background-attachment 배경 이미지를 스크롤과는 무관하게 해당 위치에 고정 backgroun..
06.22(list)
2020. 6. 22. 20:28
프로그래밍/CSS
list-style 속성 ① list-style-type ② list-style-image ③ list-style-position CSS list-style 속성 속성 설명 list-style 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음 list-style-type 리스트 요소의 마커(marker)를 설정 list-style-image 리스트 요소의 마커로 사용할 이미지를 설정 list-style-position 리스트 요소의 위치를 설정 list-style-type 리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 함 list-style-type 속성을 이용하면 리스트에 다양한 마커(marker)를 적용할 수 있음 none 지정하지 않음 disc 검은 원형 ..
06.18(box model)
2020. 6. 18. 22:28
프로그래밍/CSS
박스 모델(box model) 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부름 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분 ① 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 ② 패딩(padding) : 내용과 테두리 사이의 간격. 패딩은 눈에 보이지 않음 ③ 테두리(border) : 내용와 패딩 주변을 감싸는 테두리 ④ 마진(margin) : 테두리와 이웃하는 요소 사이의 간격 마진은 눈에 보이지 않음 height와 width 속성의 이해 CSS에서 height와 width 속성을 설정할 때 그 크기가 가르키는 부분은 내용(con..
06.17(text-align)
2020. 6. 17. 23:05
프로그래밍/CSS
text-align block요소 안에 있는 inline 요소를 정렬 ① 부모블럭요소에 text-align 속성을 지정하면, 자식 inline 요소가 정렬됨 block 요소에만 text-align 속성을 적용할 수 있음(정렬 대상은 inline 요소) ② 태그안의 컨텐츠, img태그, span태그가 해당 ③ hn태그 안의 텍스트 역시 정렬됨 left 왼쪽 정렬 right 오른쪽 정렬 center 중앙 정렬 justify 왼쪽과 오른쪽 열에 맞춰 화면을 늘어뜨림 참고 사항 div를 text-align으로 정렬할 수 있을까? div 자체는 정렬되지 않고 div 안의 inline 요소만 정렬 span 태그안의 inline 요소 정렬? span 태그는 block 요소가 아니기 때문에 text-align 속성이 ..
06.16(text)
2020. 6. 16. 21:26
프로그래밍/CSS
CSS text 속성 속성 설명 color 텍스트의 색상을 설정 direction 텍스트가 쓰이는 방향을 설정 letter-spacing 텍스트 내에서 문자 사이의 간격을 설정 word-spacing 텍스트 내에서 단어 사이의 간격을 설정 text-indent 단락의 첫 줄을 들여쓰기할지 안 할지를 설정 text-align 텍스트의 수평 방향 정렬을 설정 text-decoration 텍스트에 여러 가지 효과를 설정하거나 제거 text-transform 텍스트에 포함된 영문자에 대한 대소문자를 설정 line-height 텍스트의 줄 간격을 설정 text-shadow 텍스트에 그림자 효과를 설정 unicode-bidi direction 속성과 같이 사용하여 텍스트의 기본 출력 방향을 설정 vertical-a..
06.15(font & color)
2020. 6. 15. 23:44
프로그래밍/CSS
font-style 글꼴의 스타일로 주로 이탤릭체를 설정하기 위해 사용 normal 기본 italic 이탤릭체 font-weight 글꼴의 두께로 미리 정의된 단어나 100~900 사이의 숫자를 통해 설정 100 lighter 200 300 400 normal 500 600 700 bold 800 900 bolder font-size 글자 크기로 절대값과 상대값 설정이 가능함 절대값 : 고정된 크기 상대값 : 상대적인 크기로 장치에 따라 크기 조절이 가능 웹 문서의 경우 기본글꼴은 %(예 : body의 글꼴), 그 외 css작성은 em으로 사용할 것을 권장 px 절대값으로 1px은 컴퓨터 화면에서 점 1개와 같음 pt 절대값으로 주로 인쇄매체에서 사용 em 상대값. 웹 문서에서 사용되는 단위로 컴퓨터 외..
06.12(선택자)
2020. 6. 12. 20:55
프로그래밍/CSS
selector(선택자) 전체 선택자 * { color: red; } HTML 요소 선택자 h2 { color: teal; text-decoration: underline; } 아이디(id) 선택자 #idName{ color: sandybrown; text-decoration: line-through; } 클래스(class) 선택자 .className{ color: deepskyblue; text-decoration: overline; } 그룹(group) 선택자 h2, h3, p { background-color: lightgray; } css3에서 새롭게 정의된 선택자 선택자 설명 일반 동위 선택자 해당 요소와 동위 관계에 있으며, 문서의 위치에서 해당 요소보다 뒤에 위치한 모든 특정 요소를 선택함 ..