STUDY/CSS

text로 시작하는 글자속성 1. text-align : 수평 정렬 2. text-decoration : 글자의 여러줄 지정 3. text-indent : 들여쓰기 지정 4. text-transform : 영문 대/소문자 변경 1. text-align text-align: left; : 왼쪽정렬 text-align: center; : 가운데 정렬 text-align: right; : 오른쪽정렬 text-align: justify; : 양쪽정렬 * input태그 안에서도 사용 가능 *table태그 안에서도 사용 가능 2.text-decoration text-decoration : overline; : 글자 위에 줄 text-decoration : line-through; : 글자 중간에 줄(취소선) tex..

border : 각 요소의 테두리를 변경 border 뒤에 다른 요소를 붙여서 사용 가능 border-left : 테두리의 왼쪽부분을 변경 12px solid #335 : 왼쪽 테두리 두께를 12px, 굵게, #335색깔로 변경 padding : 여백 0.2em 0.5em : 세로방향 0.2em, 가로방향 0.5em *여기서 em은 상대 단위로 요즘 많이 사용되는 반응형 웹사이트에서 이용된다. font-size에 비례해서 유동적으로 변경됨. (px나 pt는 절대 단위) 1. font-size section태그안에 id를 부여해준 뒤, #선택자를 이용하여 section 태그 안의 font-size를 설정해준다. 각각 p태그안에 class를 부여해주고 . 선택자를 이용해 p태그 안의 font-size를 설정..

1. tag선택자 - tag 그대로 선택자로 활용. 같은 tag는 동일한 스타일로 모두 적용 됨. 자동적용, 강제적용. 2. id선택자 - #id값 형태로 선택자로 활용. id값이 중복적용 불가한 특징이 있으므로 스타일도 중복적용 불가. 주로 구조적인 목적에 사용 됨. 3. class선택자 - .class값 형태로 선택자로 활용. class값이 중복적용이 가능하므로 여러 요소에 같은 스타일적용 가능. 주로 디자인적인 목적에 사용 됨. li 태그에 각각 id와 class 태그로 구분해준 뒤, 위 style 태그에서 id 태그는 #을 이용해서, class 태그는 . 을 이용해서 활용해준다. 외부파일에서도 똑같이 적용 할 수 있음 적용하고 싶은 태그에 클래스를 부여해주고, 클래스를 부여해줬으니 . 을 사용해서..

1. External Css 외부 파일 방식 - css스타일 소스르 외부 파일로 독립 시켜 작성 후 웹문서와 연결하여 적용. - 웹문서의 head 태그 내에 link 태그를 이용하여 외부 css 파일을 연결 시켜 줌. body태그 안에 있는 background color, font-size, lint-height 를 변경 background color : 배경색 font-size : 글자 크기 lint-height : 줄 높이 2. Internal CSS 웹문서 내장 방식 - 웹문서의 head 태그 내에 스타일 소스를 작성. test-align : 글자 정렬 start : 왼쪽정렬 end : 오른쪽정렬 center : 가운데 정렬 justify : 양쪽 정렬 3. Inline CSS 인라인방식 - 웹문서..