★ 아래와 같은 문서를 생성하시오. 조건 : 테이블을 구현하시오. 구현페이지 http://pinnpublic.dothome.co.kr/question/css/table_impl.html Document 10 Saepe 21 Voluptatibus Unde, aliquid Deleniti, quae mollitia pinnpublic.dothome.co.kr ■ 소스코드 Member list Table Design No Name Age ID Description 01 Lorem 21 Lorem Lorem ipsum dolor sit amet 02 Magni 22 Facere Obcaecati accusamus perspiciatis nesciunt corporis 03 Nam 23 Laudantium Ip..
★ 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..
