★ OverFlow 박스 안, 내용물이 넘치면 어떻게 할 것인지 처리하는 옵션 width와 height를 지정해주었을 때 사용함. overflow : visible | hidden | scroll | auto visible : 넘쳐도 그대로 보여줌 hidden : 넘치지 않는 정도까지만 보여줌 scroll : scroll이 생겨서, 내용이 넘치든 안넘치든 스크롤바가 생김 auto : 내용이 넘치지 않으면, scroll이 생기지 않고, 넘치면 scroll이 생김 ■ 스크롤이 넘쳤을 때 소스코드 상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다...
★ CSS 박스 모델, Box Model 모든 태그는 사각형으로 랜더링(출력) 된다. 태그가 화면에 출력 될 때 공통된 성질에 관련된 정책(모델) 1. border 2. width, height 3. padding 4. margin ■ 1. 테두리, border 모든 태그는 자신의 영역을 가진다. 영역이 항상 사각형이다. > 테두리 테두리 > 표현 O, 표현 X border-style : solid, dashed, dotted를 자주사용함. 박스 모델 상자1 상자2 상자3 상자4 상자5 ■ 2. width, height 너비, 높이를 지정 width : 개체의 너비 height : 개체의 높이 블럭 태그 : width/height 적용 가능 인라인 태그 : width/height 적용 불가능 width+..
★ TEXT 텍스트 색상, 전경색(Fore Color) /* 텍스트 색상, 전경색(Fore Color)*/ color : blue; /* color : #444; */ 텍스트 정렬(수평 정렬) left, right, center text-align: left; 텍스트 크기 /* 텍스트 크기 */ /* 권장 크기 : 10pt ~ 11pt */ font-size : 12pt; /* 권장 크기 : 12px ~ 16px */ font-size : 12px; /* 권장 크기 : 1em~1.5em*/ font-size : 1em; /* 배율로 따져서 커짐 */ /* 권장 크기 : 1rem~1.5rem */ font-size : 1rem; /* 배율로 따져서 커짐 */ 수치 표현 /* 폰트 - 그림X - 벡터 > 공..
★ HTML/CSS 케밥 표기법 aaa-bbb-ccc CSS의 대부분의 속성은 모든 태그에 적용이 가능하다! ★ CSS 색상 표현법 1. Color name : red, yellow, blue ... 2. RGB color(HEX) : #FF0055 3. RGB color(DEC) : rgb(255,0,128) 4. RGBA color(DEC) : rgba(255,255,255,1) a(alpha channel - 불투명도(0~1)) body { /* background-color: yellow; */ /* background-color: rgb(9, 115, 236); */ background-color: rgba(0,0,255,.5); } ★ , 블럭 태그 블럭 태그 영역 너비 : 100% 높이 : ..
★ Emmet CSS 선택자 문법을 사용해서, HTML/CSS 코드를 손쉽게 작성하는 기능 생산성 도구 https://github.com/emmetio/emmet-eclipse#readme GitHub - emmetio/emmet-eclipse: Emmet for Eclipse Emmet for Eclipse. Contribute to emmetio/emmet-eclipse development by creating an account on GitHub. github.com 이클립스 버전 복사 http://download.emmet.io/eclipse/updates/ 이클립스 실행 help - install 계속 next 하여 다운로드 다운 후, div 치고 ctrl + e 하면 자동 완성 기능 visu..
★ 충돌 선택자 충돌 동일한 태그를 서로 다른 선택자가 동시에 선택했을 때 발생 ★ 선택자 우선 순위 충돌이 발생하면 우선 순위가 높은 선택자가 적용 점수 계산 선택자 점수 계산 1. 태그 선택자 > 1점> "사람" 2. 클래스 선택자 > 10점> "남자" 3. 아이디 선택자 > 100점> "홍길동" ■ 선택자 충돌 ex) 동일한 조건 아래 div가 적용됨 /* 선택자 충돌 */ div { color : red;} div { font-style : italic;} 선택자 충돌 + 속성 충돌 아래 div 적용됨 /* 선택자 충돌 + 속성 충돌 */ div { color : red;} div { color : yellow;} 우선 순위가 다른 충돌 id 선택자인 box1이 적용됨 div { color : r..
★CSS 서식 적용 원하는 태그(들)를 찾아서 태그에 맞는 속성 값을 넣어 적용 CSS 문법 선택자 {속성 : 값; } 선택자 {속성명 : 값; 속성명 : 값; 속성명 : 값; } 선택자 { 속성명 : 값; 속성명 : 값; 속성명 : 값; } 1. 선택자 : 문서내에서 원하는 태그를 검색 2. 속성 : 서식의 종류 3. 값 : 속성의 값 ★ CSS 선택자, CSS Selector HTML 문서내에서 서식을 적용하려는 대상 태그를 검색하는 도구 1. 전체 선택자 (*) 모든 태그를 선택한다. 모든 태그에 동일한 서식을 적용할 때 사용 사용 ex) 2. 태그 선택자 태그명을 가지고 원하는 태그를 선택한다. 검색된 모든 태그를 일괄 적용 > 생산성!! 사용 쉬움 단점 > 같은 태그를 일괄 적용 사용 ex) 3..
★ CSS, Cascading Style Sheet HTML 서식을 담당하는 언어 독립 실행이 안된다. 반드시 HTML 코드가 있어야 css 실행이 가능하다. CSS1, CSS2, CSS3(+HTML5) HTML 서식 기능 > CSS 서식 기능(확장) + 생산성 ■ ex01) 요구사항] "안녕하세요." x 5번 출력 추가사항] 글자색 > 파란색 추가사항2] 글자색 > 빨간색 HTML만 사용 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. CSS 사용 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 ★ HTML CSS HTML 문서에 CSS를 적용하는 방법 코드 관리 코드 재사용 1. 인라인 스타일 시트(Inline Styl..
