본문 바로가기

728x90
반응형

웹언어/CSS3

(38)
[CSS3강좌] 14강 테이블 태그 관련 CSS속성 ** 영상으로 공부하고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=SMjXH6Qnd_o 1. table관련 속성을 CSS로 대체 속성 설명 CSS대체속성 예시 border table태그의 속성 : 테두리 지정 border table{ border : 1px solid red; } th{ border-top : 1px solid blue; } width table, tr, th, td태그의 속성 : ​가로폭 지정 width table{ width: 700px; } th{ width: 200px; } height table, tr, th, td태그의 속성 : ​높이 지정 height table{ height: 700px; } th{ height: 50px;..
[CSS3강좌] 13강 위치속성(position) ** 영상으로 공부하고 싶다면 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=1_biCQ6pKdU 1. 속성 정리 속성명 설명 position (선택자의 위치를 지정하는 속성) static 선택자가 자신의 원래 위치에 고정되어 있는 상태(기본값) relative 선택자가 자신의 원래 위치(static)에서 상대적으로 이동하는 속성 absolute 선택자가 body의 위치에서 절대적으로 이동하는 속성 fixed 선택자가 body의 위치에서 절대적으로 이동하나 처음 지정된 화면에 고정된 상태로 스크롤 이동시 따라다님 position의 relative, absolute, fixed와 함께 사용되는 위치값 적용 속성 top 위에서부터 지정되는 숫자 적용(px, %) botto..
[CSS3강좌] 12강 float와 clear속성 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=j5uzdunXv44 1. 속성정리 속성명 설명 float 선택자를 띄우는 속성 left 선택자를 부모 영역의 왼쪽으로 띄움 right 선택자를 부모 영역의 오른쪽으로 띄움 none float되지 못하게 처리(기본값) ** 실제로 사용될때는 block요소를 가진 태그들을 왼쪽이나 오른쪽으로 나열시킬때 사용 ** display: inline-block;을 사용하는 경우는 태그 사이에 여백이 생겨 사용하지 않음 clear 선택자의 동위(형제)선택자 중 float를 속성을 받아 따라 올라가는 것을 막는 속성 left 동위(형제)선택자가 float:left;를 받았을 때 따라올라가지 못하게 처리 r..
[CSS3강좌] 11강 여백속성(padding과 margin) ** 영상으로 보고 싶은 분은 아래 영상을 클릭해주세요. https://www.youtube.com/watch?v=a930mdh1jGs https://www.youtube.com/watch?v=Gx6HsqJJwe0 1. 속성정리 속성값 설명 padding 테두리기준 테두리 안쪽의 여백 관계기준 부모요소가 자손요소와의 간격을 조절하기 위해 여백 처리 배경색기준 (배경이미지포함) 배경색이나 배경이미지가 적용됨 margin 테두리기준 테두리 바깥쪽 여백 관계기준 동위선택자요소들간의 간격을 조절하기 위해 여백 처리 배경색기준 (배경이미지포함) 배경색이나 배경이미지가 적용되지 않음 여백속성 기록법 (margin도 동일) padding: 20px; 좌우상하 모두 여백이 20px처리 padding: 20px 50px..
[CSS3강좌] 10강 요소(Element)와 display속성 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=HuY4WkVOKrY ​1. 요소의 종류 요소 설명 block width와 height영역이 지정 가능하고, 좌우에 다른 요소의 컨텐츠를 올 수 없게 처리(수직나열처리) 해당태그 h1~h6, p, ul, ol, li, dl, dt, dd, div, form, header, section, footer 등 inline width와 height영역이 지정 불가능하고, 좌우에 다른 요소의 컨텐츠를 올 수 있게 처리(수평나열처리) 해당태그 a, span, 글자형태태그(b, i 등), 강조태그(strong, em 등) 등 inline-block width와 height영역이 지정 가능하고, 좌우에 다른..
[CSS3강좌] 9강 CSS 영역(width/height/overflow)속성 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=HuY4WkVOKrY 1. width/height 속성정리 속성 설명 width 선택자의 가로 폭을 설정하는 속성 px 선택자의 가로 폭을 절대적인 px단위로 적용 % 선택자의 가로 폭을 부모에게 상속받아 %단위로 상대적으로 적용 height 선택자의 세로 높이를 설정하는 속성 px 선택자의 세로 높이를 절대적인 px단위로 적용 % 선택자의 세로 높이를 부모에게 상속받아 %단위로 상대적으로 적용 2. 요소의 영역을 절대적으로 처리 - px단위 사용 1) 코드 뷰 p태그영역 2) 코드 완성뷰 3. 요소의 영역을 상대적으로 처리 - %로 지정하면 부모의 영역에서 상대적으로 %를 받는다. 1) 코드..
[CSS3강좌] 8강 CSS border(테두리)속성 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=a930mdh1jGs 1. 속성정리 속성명 설명 border-width (선 굵기 설정) a) 키워드 방식 : thin(얇은), thick(굵은) b) 숫자 방식 : px단위 border-style (선스타일 설정) solid 실선 dotted 짧은 점선 dashed 긴 점선 double 두줄 처리(3px 이상) outset 아래쪽 어둡게 처리 inset 위쪽을 어둡게처리 groove 파인 선(3px이상) ridge 불록한 선(3px이상) none 선없앰 border-color 테두리 색 설정 : a) 키워드 b) rgb방식 c) hsl방식 d) hex코드방식 border 속기법 : width..
[CSS3강좌] 7강 CSS background(배경)속성 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=ukPTssZLPoI 1. 속성 정리 속성명 설명 background-color 배경색 지정 속성 - color처럼 키워드, rgb, hex, hsl등 사용 background-image 배경이미지 처리 - ​url(경로); background-repeat (배경이미지 반복속성) repeat 반복(기본값) no-repeat 반복안함 repeat-x x축으로만 반복 repeat-y y축으로만 반복 round 배경이미지를 짤리지 않게 반복하고 남는 영역은 이미지를 늘려서 처리 space 배경이미지를 짤리지 않게 반복하고 남는 영역은 이미지간의 간격을 늘려서 처리 background-positio..

728x90
반응형