전체 글

<step14>'css_boxsize, select_link'

1) boxSize.html box1입니다 box2입니다 2) select.html h2입니다. div1입니다. h2입니다. h2입니다. div2입니다. h2입니다. 3) select_link.html 바로가기1 바로가기2 바로가기3 바로가기4 div입니다 4) select_nth.html menu1 menu2 menu3 menu4 첫번째 자식 h2입니다 두번째 자식 p입니다 세번째 자식 div입니다 네번째 자식 h2입니다 다섯번째 자식 p입니다 lank1 lank2 lank3 lank4 1행 1열 2행 2열 3행 3열 1행 1열 2행 2열 3행 3열 1행 1열 2행 2열 3행 3열 1행 1열 2행 2열 3행 3열 5) display.html box1 box2 box3 box4 list1 list2 li..

<step14>'html_markup'

1)markup.html About Us 기업소개 연혁 CEO 메시지 고운세상 글로벌 네트워크 Brands Dr.G 스킨 솔루션 Sustainability 고운실천 윤리경영 News 고운이야기 공지사항 Careers Contact 닫기 KO KO EN 01Gowoonsesang Cosmetics 누구나 피부를 건강하게 우리는 피부 과학으로 세상을 더 건강하고 아름답게 만들고 있습니다. 02Gowoonsesang Cosmetics 함께 성장하는 고운세상 고운세상코스메틱은 누구나 건강한 피부로 행복한 삶을 누리는 세상을 꿈꿉니다. 이러한 뜻을 함께하는 사람들이 모여 도전과 성장, 소통과 협력으로 고운세상의 아름다운 문화를 만들어 갑니다. 임직원 모두가 ‘피부과학 전문가’로 활동하며, 함께 ‘성장하는 고운세상..

css - boxmodel/boxsize, padding, margin, table

박스 모델 1) padding - 요소의 내부여백 설정 * left, right, top, bottom 각각 설정 padding-left:20px; padding-right:30px; padding-top:50px; padding-bottom:60px; * 전체설정 padding:30px; (위아래) padding:20px 30px; (좌 우) padding:20px 30px 40px; (위 좌우 아래) padding:20px 30px 40px 50px; (위 우 아래 좌) ※box-sizing: 박스의 크기를 어떤 것을 기준으로 계산할지를 지정 속성값: border-box(테두리를 기준으로 크기를 정함) content-box(컨텐츠 영역을 기준으로 크기를 정함) 2) margin - 요소의 바깥여백 설..

<step13>'css_text, boxmodel, table'

1) fontstyle.html div1 입니다. div2 입니다. div3 입니다. text transform 2) box.html box1입니다. box2입니다. box3입니다. 3) table.html 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 4) 예제1 교내장학 - 기타장학(학생 신청 장학) 장학명 신청시기 신청방법 제출서류 복지장학 12월 / 6월 uwins - 장학신청 (매학기 신청) 장애인증명서/가족관계증명서 공무원본인장학 재직증명서 행복나눔명예장학 신청서 행복나눔장학 신청서 가족장학 5월 / 11월 가족관계증명서 국가유공자본인장학 입학금 납부 전 학생복지팀 제출 교육지원대상자증명서 국가유공자자녀장학 대학수업료등 면제대상자증명서 교직원자녀장학 (교직원이 신청) UWIN..

css - 색상값

css 색상값 1) 색상명 red, yellow, .... 2) 16진수 표현법 - RGB색상값을 각각 16진수로 변환한 것(00~ff) ex) 녹색 #00ff00 3) RGB 색상값으로 표현(0~255) rgb(r, g, b) ex) 녹색 rgb(0,255,0) 4) RGBA (0~1) - 투명도 rgba() ex) 투명한 녹색 rgba(0,255,0,0.5)

css - 텍스트 관련 스타일 속성

1) color - 텍스트의 색상을 설정 body { color: red; } body { color: rgb(255,0,0); } body { color: #ff0000; } 2) letter-spacing - 글자 사이의 간격을 설정 div { letter-spacing: 10px; } 3) text-indent - 단락의 첫줄에 들여쓰기를 지정 div { text-indent: 30px; } 4) text-align - 텍스트의 수평방향 정렬 속성값 : left/ right/ center div { text-align: center; } 5) text-decoration - 텍스트에 효과를 설정하거나 제거 속성값 : overline/ line-through/ underline/ none div { ..

css - 적용/ 선택자

css 적용 1) 내부 스타일 시트 태그 안에 태그를 사용 2) 외부 스타일 시트 style.css 생성 후 안에 태그를 사용하여 불러와서 사용 3) 인라인 html요소 내부에 style속성을 사용하여 css를 적용 ex) 선택자란? 1) tag선택자 - 태그명으로 선택 ex) div{ color: red; } 2) id선택자 - id명으로 선택 ex) #box2 { color: red; } 3) class선택자 - class명으로 선택 ex) .box{ color: red; } div1 div2 div3 4) 하위 선택자 A B 5) 자식 선택자 A > B 6) 형제 선택자 A + B 7) 연속 선택자 A, B 8) 모든 태그 선택자 * 9) ※가상 선택자 (띄어쓰기 주의) a:link 방문하지 않은 ..

html - label 태그

label 태그 : 양식 입력 창의 요소들을 위한 캡션을 명시함 1. 명시적 작성방법 label의 for속성과 input의 id속성을 명시함으로써 연결해주는 방식 ex) 이름 2. 암시적 작성방법 label태그 안에 input태그를 넣음으로써 for속성을 명시하지 않더라도 암묵적으로 연결하는 방식 ex) 이름

html - 변수 표기법

1) 카멜표기법 my first variable myFirstVariable 2) 파스칼표기법 my first variable MyFirstVariable 3) 팟홀표기법 my first variable my_first_variable

html - ID, CLASS속성/ 요소 복제/ 넘버링/ 텍스트 {}/ 그룹핑/ 커스텀 속성

* ID, CLASS속성 div#idname : id값이 idname인 div태그 div.classname : class값이 classname인 div태그 * 요소 복제 li*3 : * 넘버링 - $ 위치에 값이 1부터 1씩 증가(1,2,3,4...) li.list$*3 * 텍스트 {} p{text} : text * 그룹핑 div>(div>h1+ul)+h2 * 커스텀 속성 a[href="http:naver.com"]