wkun 님의 블로그

CONTENTS CSS Practice홈페이지 레이아웃 : section 부분(card, product, category) ------------------------------------------- CSS Practice 홈페이지 레이아웃 : section 부분(card, product, category) 예제1)Boxing Dom treehtmlbody>  section class="category">           div class="card_box">        div class="card_item">        img src="note.jpg" alt="notebook">      div>      div class="card_cotent">        h3>CATEGRYh3>    ..

CONTENTS CSS Practice홈페이지 레이아웃 : section 부분슬라이드 기능: 과 사용 --------------------------------------------------------------- CSS Practice 홈페이지 레이아웃 : section 부분 예제1) Boxing Dom tree htmlbody>  section>    div class="container">      div class="text">        h1 class="font_color1">Sale 20% Offh1>        h1 class="font_color2">On Everythingh1>        br>        p>Explicabo esse amet tempora quibusdam ..

CONTENTS CSS Practice중간 퀴즈홈페이지 레이아웃 : header, nav 부분 ----------------------------------------------------------- CSS Practice 중간 퀴즈문항1. 아이콘을 사용하기 위해 폰트어썸을 연결해야한다. 연결방법은? 2. HTML에서 큰 레이아웃 태그 6개는 무엇인가? 3. HTML에서 제목 태그는 무엇인가? 4. HTML에서 문단 태그는 무엇인가? 5. HTML에서 순서 없는 리스트 태그는 무엇이며, 리스트의 각 항목을 나타내는 태그는 무엇인가? 6. 의미는 없으나 주컨텐츠를 하나의 그룹으로 묶는 블록레벨의 대표적인 태그는 무엇인가? 7. 의미는 없으나 단순히 일부 글꼴 꾸미기 위해 사용하는 인라인레벨의 대표적인 태..

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 ..