wkun 님의 블로그

CONTENTS CSS Practice1. 랠리 테스트2. HTML&CSS 작업순서3. 홈페이지 레이아웃 : header, nav 부분 정렬 ------------------------------------------------------------------------------ CSS Practice 1. 랠리 테스트 문항답변1다음의 선택자의 특징을 서술할 수 있다.타입선택자아이디선택자클래스선택자전체선택자하위(후손)선택자자식선택자인접선택자형제선택자타입선택자 : 특정한 HTML요소들 혹은 요소를 선택함p{ color:blue;}아이디선택자 : 특정 ID를 가진 요소를 선택함#myp{ color:blue;}클래스선택자 : 특정 클래스를 가진 요소들 혹은 요소를 선택함.myp{ color:blue;}전체선..

CONTENTS Section7 CSS3 전환&변환 Section8 CSS 애니메이션   -------------------------------------------------------------------- Section7 CSS3 전환&변환 ◎transform 변환 속성: origin-효과가 적용되는 과정을 좀 더 부드럽게 보여주거나, 조정할 수 있도록 해주는 속성속성값의미transform-origin요소 변환의 기준점을 설정 ex)top-left, center, right-bottom transform-style3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정perspective하위 요소를 관찰하는 원근 거리를 설정perspective-origin원근 거리의 기준점을 설정backface-..

CONTENTS Section6 CSS3 백그라운드Section7 CSS3 전환&변환 *CSS 파일 작성 방법*웹 프로그래밍 작업 순서 참고사이트) Font Awesome, draw.io ---------------------------------------------------------------------- Section6 CSS3 백그라운드 1.백그라운드 ◎background-요소의 배경을 설정(단축 속성: background: 색상 이미지경로 반복 위치 스크롤특성;)속성값의미기본값background-color배경 색상transparent(투명)background-image하나 이상의 배경 이미지none  cf) background-repeat배경 이미지의 반복repeat background-po..

CONTENTS Section2 CSS3  박스 속성CSS flexbox Game & reviewSection4 CSS단위Section5 CSS 글자 속성  참고사이트) Google Fonts  ------------------------------------------------------------------  Section2 CSS3  박스 속성   ◎ dispaly:flex  -flex: 가로, 세로의 축을 바꿈  1)dispaly:flex의 장단점-장점: 부모가 요소의 높이 인식, 계산미흡으로 인한 무너짐 없음-단점: ie10이하에서는 실행되지 않음 2)용어정리-flex-container: 블록레벨요소, flex-items를 감싼 부모요소-flex-item: 블록레벨요소, flex-contain..

CONTENTS Section1 CSS 사용법과 선택자8.상속Section2 CSS3  박스 속성3. 박스 속성4.레이아웃 속성Section3 CSS3 레이아웃  참고사이트) CodePen  -------------------------------------------------------------------------------  Section1 CSS 사용법과 선택자  8.상속 ◎상속-부모 요소의 스타일이 자식요소에 적용되는 것-특정 요소는 상속을 통해 하위 요소들에게 적용-모든 요소가 적용되지는 않으며 특히 다음과 같은 문자계열들이 상속이 적용(text관련) ·font: font-size          color          text-align          text-indent      ..

CONTENTS CSS Game&Review Section2 박스 속성1.박스모델2.테두리 속성3.박스 속성 참고사이트) Box Shadow CSS Generator   -----------------------------------------------------------------------------  CSS Game&Review 문제풀기CSS Diner https://flukeout.github.io/ CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.io 정답1. plate2. bento3. #fancy4. plate apple5. #fancy pickle6. .small or apple.small7..

CONTENTS Test & reviwe Section1 CSS 사용법과 선택자5. 속성 선택자6.가상 클래스 선택자7. 조합 선택자 ----------------------------  CONTENTS  Test & review1.다음의 요구사항을 만족하는 태그를 알맞게 제시하시오.(각 2점 /총 10점) - 요구사항 5가지는 첨부된 압축파일의 img폴더에 exam1.png로 제시되어있습니다.2.다음의 html 코드에서 a태그를 클릭하면 해당 지점으로 스크롤 이동하도록 제작하시오. - 포인트 이동 5점, 탑으로 이동 5점 포인트 4으로 이동하기 포인트 1 포인트 2 포인트 3 포인트 4 ..

CONTENTS HTML Excercise2레이아웃 태그 연습 Section1 CSS 사용법과 선택자1.CSS3 개요2.CSS3 기본 사용법3. CSS 선언 방식4. CSS3 선택자  ----------------------------------------------------------------------  HTML Excercise2 1.레이아웃 태그 연습1)nav(1), html>body>    div>    a href="#">Homea>      a href="#">Abouta>    a href="#">Testimonialsa>    a href="#">Bloga>    a href="#">Contacta>     div>body>html> (2), , html>body>  , 그리고 태..

CONTENTS HTML Practice1. 랠리 테스트2. HTML  예시 대로 짜보기3. 블록 나누기4. 홈페이지 레이아웃 태그 연습 참고사이트) GoFullPage, ezPDF Editor, Theme Wagon  --------------------------------------------------------------------------------  HTML Practice 1. 랠리 테스트 문항 답변1다음의 태그중 인라인과 블록을 선별할 수있다.puloldllih1 ~ h6addresshrlabelb,strongmarkibrspansmallsubsups인라인 : label b strong mark i br span small sub sup s블록 : p ul ol dl li h1~h6 a..

CONTENTS  Section5 입력양식과 공간 분할 태그2.입력 양식 태그3.공간 분할 태그 참고사이트) Pixlr Editor ----------------------------------------------------------------------------------------  2.입력 양식 태그 ◎텍스트 공간 입력 양식-텍스트를 여러 줄에 걸쳐 자유롭게 입력 가능 텍스트 공간 입력 양식 만들기body>  h2>텍스트 공간 입력 양식h2>  form>    textarea rows="5" cols="50">텍스트를 작성하는 공간입니다.textarea>    p>p>    input type="submit" value="전송">    input type="reset" value="다시작성">..