웹 문서 꾸미기_CSS / 디자인사이트 모음
웹 문서를 꾸미는 방법
1. CSS 파일
=> 전체 페이지에 대한 공통 요소를 꾸밀 경우
=> 다국어 사이트를 만들 때 용이(CSS+XML)
=> 각 브라우저에 대한 처리
=> 사용자 기기에 따른 꾸미기(CSS) 처리 / 미디어쿼리
: 모바일 기기 접속 - react.js / vue.js
2. HTML 문서 내
=> 특정 웹 문서 내에서만 꾸미기 요소가 다를 경우에 사용
1) <style>~</style>
: 위치 - <head>여기!</head> 해당 웹 문서에 전체 적용
2) HTML 태그 내에서 style 속성을 사용
: 특정 요소에 대한 스타일 지정 <p style="color:orange;">이런거!
: HTML5의 권장사항
( HTML / CSS /JSP 분리하여 사용 권장)
- HTML : 웹 문서 구조
- CSS : 꾸미기
- JS : 이벤트처리
스타일 선언 및 사용 방법
CSS파일과 <style></style>에서의 방법
1. * : 모든 요소(태그)에 대한 공통 사항
2. 태그명 : 동일 태그에 대한 공통사항
3. 스타일클래스 : 특정 태그에 대한 스타일
- 태그 내부에 class속성 (.classname)
4. 태그 아이디 : 특정 태그에 대한 스타일
- 태그 내부에 id 속성 (#idname)
*스타일클래스, 태그 아이디 분석은 웹 크롤링(스크랩핑) 작업을 할 때 필수
스타일은 중복 가능
ex) .red{ }
.left{ }
class="red left" <= 둘 다 적용 됨 / style cascading
(가운데 쉼표가 아니라 꼭 띄어쓰기 해야함)
스타일 적용 확인 방법
- 브라우저 개발자 모드 (F12)
html 스타일 태그
1. html 태그 내 스타일 속성 : <p style="color:orange;">
2. head에서 선언하는 style 태그
<style>
p{
color:orange;
}
</style>
* 두개가 함께 지정되어 있을 경우 HTML태그 내 style속성(1번)이 우선 됨
* 만약 2번 안에 color:orange !important;와 같이 중요 속성으로 지정되었을 경우 이것을 우선함
<span></span>
:다른 태그와 달리 특별한 형식을 가지고 있지 않은 태그
: 이 태그를 이용해서 부분만 강조, 다른 스타일 적용 등을 할 수 있다.
* 전체적인 레이아웃을 만들 때는 주로 <div></div>를 이용
<!-- 콤보박스 형태 -->
<select>
<option>출력글자</option>
<option>출력글자</option>
<option>출력글자</option>
</select>
<!-- 리스트 형태 -->
<select size=3>
<option>출력글자</option>
<option>출력글자</option>
<option>출력글자</option>
</select>
<!-- 이미지 출력 -->
<img src="이미지 경로" />
<!-- 비디오 출력 -->
<video src="비디오 경로" />
<!-- 오디오 출력 -->
<audio src="오디오 경로" />
<!-- 임의의 그림을 그릴 경우 -->
<canvas id="아이디명" width=" " height=" " /> 와 JavaScript를 사용
=> 주로 차트나 게임개발 시 사용....
색상
1. 16진수 => #RRGGBB #RGB
2. 색상이름 =>red, green,~~
3. 함수
- rgb , rgba(R,G,B, alpha)
: R,G,B : 0~255의 숫자
: alpha:0~1 사이의 실수 => 0-완전투명, 1-완전 불투명
- hsl(h,s,l) 명도채도
:입력값 % 0~100
텍스트
1. color : 글자 색상
2. font-size: 글자 크기
3. font-family: 글꼴
4. font-weight: 글자 굵기
5. font-style: 글자 스타일
@font-face:새로운 폰트를 설정할 때 사용
내부 : font-family를 이용하여 폰트명을 지정
src : url('폰트위치') format('이름')
css 관련 사이트 모음
http://www.css3factory.com/linear-gradients/ http://www.colorzilla.com/gradient-editor/ http://www.css3generator.com/
CSS3 Button Generator – This site was closed.
css3button.net
CSS3Generator by @RandyJensen
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has sur
css3generator.com
CSS Gradient Generator | CSS3 Factory
The CSS3 Gradient Generator is a showcase for the power of CSS gradients. It also provides a simple graphical user interface for working with CSS webkit gradients, allowing a user preview real time what their gradient will look like and provide the code fo
www.css3factory.com