content 영역의 크기를 조절하는 속성 (width, height) width : 가로 길이 조정 height : 세로 길이 조정 px (고정크기) : 요소 크기가 변하지 않음 % (가변크기) : 부모 요소 크기와 화면 크기에 따라 요소 크기가 달라짐 vh : 현재 화면 높이 (현재 화면의 vh%만큼의 비율) 화면 배치 방법 변경 (display) 블럭요소와 인라인요소의 속성을 변경해서 배치 방식을 변경할 수 있음 inline : 블럭 요소를 인라인 요소로 변경 inline-block - 인라인 요소로 배치를 하나 width, weight 의 크기는 유지됨 block - 기존 인라인 요소를 블럭 요소로 변경 none - 화면에 안보임, 공간 차지X 선택자{ display:inline/inline-bo..
분류 전체보기
배경색 지정 (background-color) background-color: 색상; 배경색 적용 범위 지정 (background-clip) border-box (기본값) : content, padding, border까지 배경 적용 padding-box : content, padding까지 배경 적용 content-box : contents 영역만 배경 적용 background-clip : border-box; 배경으로 이미지 적용 방법 background-image:url : 적용할 이미지 경로 지정 background-repeat : 배경 이미지 반복 여부 지정 repeat : 가로 세로로 반복, 기본값 repeat-x : 가로로만 반복 repeat-y : 세로로만 반복 no-repeat : 반복x..
테두리 스타일 지정 (border-style) border-위치-style: none/dotted/dashed/solid/double/groove/ridge/inset/outset; none dotted : 점선 dashed : 긴 점, 각진 테두리 solid : 실선 double : 두 줄 실선 groove : 파인 선 ridge : 불룩한 선 inset : 위쪽이 튀어나옴 outset : 아래쪽이 튀어나옴 테두리 두께 지정 (border-width) border-위치-width : 테두리두께; 테두리 색상 지정 (border-color) border-위치-color : 테두리색상; 박스에 그림자 효과 (box-shadow) box-shadow : 가로(x) 세로(y) 흐림정도 번짐정도 색상; 둥근 모..
여백 및 간격 관련 스타일 요소 영역 : content(문장) + padding(여백) + border(테두리) width와 heights는 content 영역의 크기를 의미, padding, border 영역 미포함 div 요소는 border 영역 까지를 포함 padding, border 영역 까지 포함하려면 box-sizing 사용 속성 하나로 상하좌우 스타일 지정 css에서 상하좌우 지정할 스타일이 있으면 시계방향 (top-left-bottom-right)으로 한 번에 지정 가능 2개만 정하면 상하, 좌우로 적용됨 1개만 정하면 모든 방향에 적용됨 #test3{ padding : 50px 20px 10px 0px; /*시계 방향(위, 오른쪽, 아래, 왼쪽) */ } padding 내용물영역(cont..
list-style-type 불릿기호를 변경해줄때 사용 ul (순서 없는 목록) 선택자 { list-style-type : none(자주사용됨) / disc(원) / circle(속이 빈 원) / square; } ol (순서 있는 목록) decimal : 목록 항목을 1부터 시작하는 숫자로 표시 decimal-leading-zero : 10 미만 숫자에 01부터 시작하는 두 자리 숫자로 표시 lower-alpha : 알파벳 소문자로 표시 upper-alpha : 알파벳 대문자로 표시 lower-roman : 로마 숫자 소문자 (i)로 표시 upper-roman : 로마 숫자 대문자 (I)로 표시; 선택자{ list-style-type : decimal/decimal-leading-zero; list-s..
글꼴 관련 스타일 속성 (font~) font-familly 글꼴을 지정할 때 사용 쉼표를 사용하여 여러 글꼴을 나열할 때 앞의 글꼴이 없다면 뒤의 대체 글꼴 반영할 수 있음 선택자 { font-family : 글꼴명, 글꼴명; } font-size 글꼴 크기를 변경할 때 사용 px : 픽셀 (고정크기) em : 배수 (가변크기) % : 비율 (가변크기) font-weight 글꼴의 굵기를 표현할 때 사용 선택자 { font-weight:normal/bold/bolder/lighter/100/400/900; } font-varient 텍스트 문구를 작은 대문자로 변경할 때 사용 선택자 {font-variant:small-caps;} font-style 텍스트 문구를 기울이고자 할 때 사용 italic :..
인라인 스타일 방식 스타일을 부여하고자 하는 요소 내에 style 속성을 이용하여 직접적으로 기입하는 방식 재사용성x 인라인이 스타일 방식이 내부스타일 방식보다 우선순위가 높음 인라인 속성은 width, height 적용되지 않음 (display block으로 변경해주면 됨 ) css 기본 선택자 내부 스타일 방식 현재 이 문서에 적용시키고자 하는 스타일 정보를 style 태그 내에 기입하는 방식 단점 : 다른 html 페이지에서 해당 스타일을 쓰지 못함 외부 스타일 방식 스타일 정보만을 따로 관리하는 .css외부문서 만들고 link 통해 연결 (권장) 여러 개의 html 시트에 속성을 불러올 수 있어 재사용성이 좋음 경로가 잘못되면 콘솔에 404에러 뜸 /* rel : 문서의 형식 */
선택자란 특정 html 요소를 선택하고자 할 때 사용하는 기능 해당 요소를 선택해서 원하는 스타일과 기능을 적용시킬 수 있음 기본 선택자 태그, 클래스, 아이디값 기준으로 HTML 요소를 선택해와서 내가 원하는 CSS를 부여 1. 전체 선택자 ( * ) * { 스타일 속성 : 값; 스타일 속성 : 값; } 2. 태그 선택자 (태그명) 해당 문서 내 같은 태그 모두를 선택, 태그 여러개 하고 싶으면 콤마를 붙이면 됨 태그명, 태그명2{ 스타일속성: 값; } 3. 아이디 선택자 (#아이디명) 모든 태그 내 공통적으로 쓸 수 있는 속성 : id, class id : 문서 내 고유한 값으로 하나만을 작성 (중복x) class : 중복된 값 작성 가능, 여러 개 작성 가능 해당 이 문서 내 특정 html 요소 하..
하이퍼링크란 웹문서에서 다른 웹문서로 클릭만으로 이동시킬 수 있게 하는 기능 텍스트문구를 클릭해 이동하거나, 이미지를 클릭해 이동하거나, 현재 페이지 내에서도 링크를 통한 이동이 가능 인터넷이 연결된 상황이면 현재 서비스 되고 있는 웹페이지도 링크 가능 하이퍼링크 태그 (a태그) 글자 target 속성 _self” : 하이퍼링크 클릭 시 현재 페이지에서 열기 (생략 시 기본값) "_blank" : 하이퍼링크 클릭 시 새 창에서 열기 href 속성에 id값 대입 시 현재 문서 내에서 해당 id값이 있는 곳으로 이동 글자 글자
블럭 요소 한줄 단위로 영역을 차지하는 요소 줄바꿈이 적용되어있어 이미 존재하는 요소의 다음줄에 출력 h , p , pre , "div" 등이 있음 인라인 요소 content내용에 해당되는 부분만 영역을 차지하는 요소 줄바꿈이 적용되지 않아 옆으로 연이어져서 출력 다음줄로 넘기고자할때는 br로 개행 해야함 b, s , mark, input .... , "span" 등이 있음 div 태그와 span 태그 차이점 1. 차지하는 영역 (줄 바꿈 적용) div 태그 : 블럭요소 (한 줄 단위 영역 차지) span태그 : 인라인 요소 (content 영역만을 차지) 2. 영역 지정 방식 div 태그 : 전체 감싸는 사각형 박스로 영역 지정 span태그 : 문장 단위로 영역 지정 iframe 태그 현재 문서 내 다..
