본문 바로가기

✒️ GURU39

[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.

[HTML5] 17. CSS3에서의 색 표현법 + 색 관련 CSS3 프로퍼티들 + 텍스트 꾸미는 CSS3 스타일 시트 + CSS3의 표준 단위 + 단축 프로퍼티 font + 구글 폰트 불러오기 17. CSS3에서의 색 표현법 + 색 관련 CSS3 프로퍼티들 + 텍스트 꾸미는 CSS3 스타일 시트 + CSS3의 표준 단위 + 단축 프로퍼티 font + 구글 폰트 불러오기 # CSS3에서의 색 표현법 - 16진수 코드로 표현 # 8A 2B E2 --> blueviolet - 10진수 코드와 RGB()로 표현 rgb( 138, 43, 226 ) --> blueviolet - 색 이름으로 표현 : CSS3표준에서는 140개의 색 이름이 존재 #색 관련 CSS3 프로퍼티들 - HTML 태그의 텍스트 글자 색 color : 색 - HTML 태그의 배경 색 background - color : 색 - HTML 태그의 테두리 색 border - color : 색 ex 1) ex 2) #텍스트 꾸미는 CSS3.. 2022. 7. 19.

[HTML5] 16. 셀렉터 조합 + 자식 셀렉터 + 자손 셀렉터 + 전체 셀렉터와 속성 셀랙터 + 가상 클래스 셀렉터(pseudo-class) 16. 셀렉터 조합 + 자식 셀렉터 + 자손 셀렉터 + 전체 셀렉터와 속성 셀랙터 + 가상 클래스 셀렉터(pseudo-class) # 셀렉터 조합하기 - 2개 이상의 셀렉터 조합 : 조합에 적합한 HTML 태그에만 적용 - 자식 셀렉터 (child selector) : 부모 자식 관계인 두 셀렉터를 '>' 기호로 조합 ex) 의 직계 자식인 에 적용되는 스타일 시트 div > strong { color : dodgerblue ; } - 자손 셀렉터 (descendent selector) : 자손 관계인 2개 이상의 태그를 나열 ex 1) 의 자손 에 적용되는 스타일 시트 ul strong { color : dodgerblue ; } ex 2) # 전체 셀렉터 : 와일드 문자(*)를 사용하여 모든 태그에 .. 2022. 7. 19.

이전 1 2 3 4 5 ··· 7 다음

티스토리툴바