본문 바로가기

분류 전체보기

(35)

색상과배경 표현방법-키워드사용 {blue, transparent (초기값, 투명)}-RGB 3차원 좌표계(# + 16진수 표기법 또는 rgb(), rgba() 의 함수형 표기법)-HSL 실리더형 좌표계 16진수표기법 (HEX)0~9 + A~F = 16가지를 이용0이 제일 작은숫자, F가 제일 큰 숫자 000000을 사용하게 되면 채도가 제일낮다 (검정색) FFFFFF를 사용하게 되면 채도가 제일 높다 (하얀색) background-color: #000000; background-color: rgb(0,0,0); 검정색 width: 100px; height: 100px; background-color: rgba(0,0,255,0.8)} rgba (0,0,255,0.8) 0.8은 80퍼센트 투명도(..

레이아웃 display를 통하여 inline 요소를 block 요소로, block 요소를 inline 요소로 바꿀 수 있음. -ex. span-영역의 크기가 내부 콘텐츠 크기로 정해짐.-margin, padding의 top과 bottom을 지정할 수 없음 (좌우여백은 가능)-여러 요소가 가로 배치가 된다. -ex. div-영역의 크기를 width와 height를 지정할 수 있음.-width를 지정하지 않으면 가로 전체를 차지한다-여러 요소가 세로 배치가 된다. -ex. input-영역의 크기를 width와 height를 지정할 수 있음.-여러 요소가 가로 배치가 된다. span>1span> span>2span> span>3span>span{ ..

박스모델 (Box Model) -content: 콘텐츠가 표시되는 영역(width, height를 가지고 정의할 수 있음) -padding: 콘텐츠와 테두리(border) 사이의 여백 -border: padding과 margin 사이의 테두리 (있을수도 있고 없을수도 있음 /설정하지 않으면 0이라 보이지 않음) -margin: 가장 바깥쪽 레이어로 콘텐츠의 패딩, 테두리를 둘러싸면서 해닥 박스와 다른 요소 사의 공백 역할 width height Lorem, ipsum dolor sit amet Lorem, ipsum dolor sit amet .block { width: 300px; height: 100px; background-color: wheat; } .inline { width: 300px; height: 100px; back..

단위와 값 상대길이 :기준점의 몇배 절대길이: 보여지는 자체로의 길이 (고정값) ->px 절대길이로 설정을 하게 되면 사용자가 개인적으로 설정한 값에 따르지 않기 떄문에 접근성 문제를 유발할 수 있다 (눈이 안좋거나 등등의 이유로) ---> font-size를 설정할땐 em, rem 등 상대길이를 선택하는것이 좋다. em 1em=>부모의 font-size 안녕! 안녕! div { border: 1px solid silver; padding: 1px; } .parent { color: blue; font-size: 24px; } .child { color:red; font-size: 0.5em; } 브라우저에 글자 크기가 16으로 저장되어있을 경우 .parent에 2em으로 설정하면 32px로 표현됨 rem 1rem..

폰트관련속성 div> p class="default"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci eaque ab nesciunt ducimus iste, laudantium maxime quam, blanditiis fuga facilis quaerat. Voluptas architecto suscipit voluptatibus reiciendis amet nulla voluptates et? p> p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae facere hic lib..

selector (셀렉터) 1. type selector -특정 요소나 그룹을 선택하는것이 아니라 웹 전체적인 일관적이게 표현해야하는 것들이 있을때에만 사용 -상단에 작성하는 것이 좋음 2. ID selector-콕 찝어서 설명할 수 있는 유일한 이름표 (전체 html 중 딱 1개)- # ~~~ { } 3. class selector-ID와 다르게 중복 선택이 가능 - .~~~{ } head> link rel="stylesheet" href="styles/main.css"> title>csstitle> style> .title { font-size: 36px; color: red; font-weight: bold; } #heading { font-size: 36px; ..

CSS ( Cascading Style Sheets) 발전함에 따라 font, table, animation 등등이 버전에 따라서 업데이트 됨. 모듈별로 버전이 달라지기 때문에 웹 브라우저의 지원 범위가 다를 수도 있음--> 재미난 속성들을 공부해서 바로 적용하는것보단 사용자들이 어떤 웹브라우저를 많이 사용하는지 확인 한 후에 적용하는것이 좋음. Cascading (폭포처럼 흐른다.) 위에서 정의한 것들이 아래에까지 적용됨. 1. 룰 기반 (규칙)의 언어 (여러가지) ex. ⓐh1태그는 red, ⓑ li 태그는 green ... -> 그대로 적용 2. 특정요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있음. -그것이 태그가 될 수도 있고 그 외의 것이 될수도 있음-- > selector e..

전역속성 문서 전체에서 유일한 고유식별자를 정의한다. 고유하기 때문에 문서 통틀어서 딱 1개, 중복으로 사용할 순 없음. id 시작할땐 반드시 영어 소문자로 시작해야하고 -나 _는 가능하지만 공백이 들어가선 안됨. 안녕하세요 안녕하세요 안녕하세요 안녕하세요 수많은 중에서 id를 정의해서 3번째 안녕하세요를 지목 안녕하세요 안녕하세요 안녕하세요 안녕하세요 id 와 다르게 중복이 가능. 안녕하세요 안녕하세요 안녕하세요 안녕하세요 2번째 안녕하세요는 hi hello 라는 클래스를 갖는게 아니라 hi와 hello 라는 class 2가지를 갖고 있음. 그 여러개를 구분할때 공백으로 구분함. 여러개의 자바스크립트를 한 요소에 적용하기 용이함. The style attribute can override it, though. ..

이전 1 2 3 4 5 다음

티스토리툴바