본문 바로가기

✒️ GURU/HTML523

[HTML5] 23. CSS3와 표 + 셀 여백 및 정렬 + 셀 크기 + 배경색과 테두리 효과 23. CSS3와 표 + 셀 여백 및 정렬 + 셀 크기 + 배경색과 테두리 효과 # CSS3와 표 테두리 제어 - border : 표 테두리를 제어할 수 있음 ex 1) border-collapse : collapse; --> 중복된 테두리 하나로 합치기 # width, height 와 셀 크기 제어 ex 1) th의 height가 40px, width 가 100px이고 td의 height, width 가 각각 20, 100px인 경우 ex 2) 와 의 자손 # 셀 정렬과 셀 여백 - padding : 여백을 조절할 수 있음 - text-align : right, left, center 등의 정렬을 설정할 수 있음 ex) + 셀은 모두 오른쪽 정렬된 상태임 # 배경색과 테두리 효과 ex) + Line 2.. 2022. 7. 22.

[HTML5] 22. CSS3와 리스트 꾸미기 + 텍스트 숨기기와 visibility + overflow 프로퍼티 + 아이템과 배경색 + 마커 위치 및 종류 22. CSS3와 리스트 꾸미기 + 텍스트 숨기기와 visibility + overflow 프로퍼티 + 아이템과 배경색 + 마커 위치 및 종류 # visibility 와 텍스트 숨기기 - 공간은 차지하되, 텍스트는 보이지 않게 설정 가능 # overflow 프로퍼티 - overflow 프로퍼티의 다양한 옵션(hidden, visible, scroll)들을 활용하여 내용의 출력 여부를 결정할 수 있다. + 첫 번째 박스가 옵션 hidden, 두 번째는 visible, 세 번째는 scroll 을 적용한 결과이다. # CSS3 프로퍼티와 리스트 꾸미기 - 리스트 모양을 꾸밀 수 있는 CSS3 프로퍼티 프로퍼티 설명 list-style-type 아이템의 마커 타입을 지정하는 프로퍼티 list-style-imag.. 2022. 7. 21.

[HTML5] 21. 박스의 배치와 position 프로퍼티 + 상대 배치와 절대 배치 + 고정 배치 + z-index 프로퍼티 21. 박스의 배치와 position 프로퍼티 + 상대 배치와 절대 배치 + 고정 배치 + z-index 프로퍼티 # 박스 배치와 position 프로퍼티 - normal flow : 웹 페이지에 나타있는 순서대로 HTML 태그 배치 : position 프로퍼티를 이용해서 normal flow 를 무시할 수 있음 - position 프로퍼티를 이용한 배치법 정적 배치(디폴트) 상대 배치 절대 배치 고정 배치 유동 배치 positon : static position : relative position : absolute position : fixed float : left / float : right - position 프로퍼티를 사용할 때 태그의 위치 및 크기 : top, bottom, left, rig.. 2022. 7. 21.

[HTML5] 20. 배치 및 블록 박스 + 인라인 박스 + 박스 유형 제어와 display 프로퍼티 20. 배치 및 블록 박스 + 인라인 박스 + 박스 유형 제어와 display 프로퍼티 # 배치 - CSS3로 HTML 태그가 출력될 위치 지정 가능 : HTML 태그의 경우 웹 페이지에 작성된 순서와 다르게 배치할 수 ㅇ - 배치 기능을 하는 CSS3 프로퍼티 display position left right top bottom float z-index visibility overflow # 블록 박스와 인라인 박스 : HTML 태그는 인라인 태그와 블록 태그로 나뉨 - 블록 태그 : 블록 박스로 출력 + 블록 박스는 새 라인에서 시작 + 왼쪽에서 오른쪽 끝까지 모두 점유 - 인라인 태그 :인라인 박스로 출력 + 인라인 박스는 블록 안에 배치됨 + 옆에 다른 태그를 배치할 수 있음 # 박스의 유형 제어.. 2022. 7. 20.

[HTML5] 19. 배경 + 텍스트 그림자와 text-shadow 프로퍼티 + 박스 그림자와 box-shadow 19. 배경 + 텍스트 그림자와 text-shadow 프로퍼티 + 박스 그림자와 box-shadow # 배경 - 배경 색 및 이미지 지정 : background-color, background-image 가 모두 지정되면 배경 이미지가 출력되지 않는 영역에 배경색을 출력함 ex. div { background-color : skyblue ; background-image : url ( " media/spongebob.png " ) ; } - 배경 이미지의 위치 --> background-position ex. 박스 중간에 이미지 출력하기 background-position : center center ; - 배경 이미지 반복 출력 --> background-repeat ex. 위에서 아래로 이미지 반복 .. 2022. 7. 20.

[HTML5] 18. CSS3의 박스 모델 + border + 테두리 18. CSS3의 박스 모델 + border + 테두리 # CSS3의 박스 모델 - 각 HTML 태그 요소는 하나의 박스로 다루어짐 --> 박스의 크기 및 배경 색, 여백과 옆 박스와의 거리 등을 제어할 수 있음 - 박스 모델의 구성 콘텐츠 패딩 테두리 여백 HTML 태그의 이미지 및 텍스트가 출력되는 부분 콘텐츠를 둘러싸고 있는 내부의 여백 패딩 외부의 테두리로, 직선 및 점선, 이미지로 테두리를 그릴 수 있음 박스의 가장 밖 영역이자 테두리 바깥 공간. 인접한 이웃 박스와의 거리이기도 함 - 박스 모델을 구성하는 CSS3 프로퍼티 ex) 의 박스 모델 보이기 - 박스 모델의 색, 테두리 및 단축 프로퍼티 ex) 박스 모델의 활용 # border와 선, 모서리 테두리 - 다양한 테두리 선 스타일 - 둥.. 2022. 7. 19.

이전 1 2 3 4 다음

티스토리툴바