kimyws

■ A조 : 홈페이지(향수)○ 발표 : 김학현, 남승연○ 조원 : 김가영, 김다나, 김학현, 남승연  ■ B조 : 홈페이지(향수)○ 발표 : 엄지혜○ 조원 : 박예지, 엄지혜, 윤지희, 장윤희 ■ C조 : 홈페이지(화장품)○ 발표 : 김민정, 이수빈○ 조원 : 김민정, 김혜원, 송다은, 이수빈 ■ D조 : 홈페이지(쇼핑)○ 발표 : 백재훈, 성정현○ 조원 : 백재훈, 성정현, 이연정 ■ E조 : 홈페이지(렌즈)○ 발표 : 박예은, 이재아○ 조원 : 김나현, 박예은, 이연아, 이재아

■ 이미지 top변경으로 내려오는 이미지 만들기  ○ 코드펜 확인 ○ HTML ○ Css.wrap{ width: 80%; margin: 0 auto;}header{ height: 200px; background-color: rgb(201, 44, 44); position: relative; z-index: 2;}main > .cts{ width: 20%; margin: 0 auto; background-color: red; position: ..

HOME PAGE 홈페이지 회사소개 회사역사 혁신기업 가구 의자 책상 소파 책장 침대 ..

1메뉴 1 2메뉴 1 2메뉴 2 2메뉴 3 1메뉴 2 2메뉴 1 2메뉴 2 2메뉴 3 1메뉴 3 2메뉴 1 ..

■ position ○ position문서상의 요소를 배치하는 방법을 정의position이 요소의 배치방법을 결정하면top, bottom, right, left가 최종 위치를 결정-> 위치 지정은 필요에 따라 선택적으로 사용 ○ position 속성값속성값의미static(정적)기본값, 요소를 일반적인 문서 흐름에 따라 배치relative(상대적)일반적 문서 흐름에 따라 배치, 상하좌우 위치 값에 따라 오프셋 적용absolute(절대적)일반적 문서 흐름에서 제거가장 가까운 position 지정 요소에 대해 상대적으로 오프셋 적용fixed(결정된)일반적 문서 흐림에서 제거, 지정한 위치에 고정된다.sticky일반적인 문서 흐름에서 제거, 스크롤 동작이 존재하는 가장 가까운 요소에 오프셋 적용 ○ relati..

■ display 속성 none block inline inline-block 보이지 않음 블럭 인라인 인라인 블럭 ○ 인라인 요소 - 위치 같은 줄에 나란히 배치, 이전요소 바로 뒤에서 시작 - 크기는 콘텐츠의 너비만 차지 즉 너비와 높이를 직접 설정할수 없음 - 여백 상하 여백 미적용 또는 예상과 다르게 작동, 좌우여백은 적용 ○ 블록 요소 - 새 줄에서 시작 사용 가능한 전체 너비를 차지, 다음요소는 블록 아래에 새줄로 배치 - 크기는 부모 요소의 전체 너비를 차지 너비와 높이 직접 설정 가능 - 여백은 상하 좌우 모든 방향의 여백 적용 ○ 인라인 - 블록 요소 - 인라인 요소처럼 같은 줄에 나란히 배치, 블록 요소처럼 너비와 높이를 지정가능 - 크기는 콘텐츠의 너비만 차지 명시적으로 너비 높이 설..

■ 박스모델(Box-Model) ○ 박스모델이란? 브라우저가 요소를 렌더링 할 때 각각의 요소는 사각형 형태로 영역을 차지 이영역을 박스라 표현하며 CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리)을 결정할 수 있다. - 박스의 영역 * 콘텐츠 영역 : 실제 콘텐츠를 포함 너비와 높이가 기본크기를 지정 * 안쪽 여백 : padding Area로 콘텐츠를 둘러싸는 공간, 콘텐츠와 테두리 사이 내부 여백 지정 * 배경색이나 배경이미지에 영향을 받음 경계선(테두리) : borde Area 패딩을 감싸는 테두리로 요소의 외곽선을 형성 * 바깥쪽 여백 : Margin Area로 테두리 바깥쪽 공간으로 다른 요소와의 외부 여백을 제공요소의 배경색이나 배경 이미지에 영향을 받지 않는다. ○ 박스 기본 콘텐츠 ..

자동 이미지 사이트 : lorem picsumhttps://picsum.photos/id/237/200/300id를 변경하면 다른 이미지가 나옴뒤에는 너비와 높이 변경https://picsum.photos/200/300랜덤한 이미지 나옴  ■ img 태그○ img 태그- 자체 닫는 태그로 끝에 별도의 닫는 태그가 필요하지 않는다.- 기본 display = inline-block 임 ○ 주요 속성- src(source) : 이미지의 url을 지정* 절대 url : https://www.abc.com/image.jpg * 상대 url : img/image.jpg (현재 페이지에서 img폴더내 jpg파일 참조) - alt(alternative text)* 이미지가 표시되지 않을때 사용자에게 보여질 텍스트* 검..

■ 레이아웃(Layout) ○ 레이아웃이란? - 구성요소를 공간에 효과적으로 배열하는 기술 - CSS 레이아웃은 웹 요소를 올바른 장소에 배치하는 기술 - CSS 레이아웃 기술은 형제 요소들을 가지런히 정렬할 수 있게 해주며 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정할 수 있다. ■ 대표적인 레이아웃 기술 ○ 일반적인 문서 흐름 ○ box모델 ○ display 속성 ○ position 속성 ○ flex box ○ grid layout

■ flex box란? ○ flex box란?- 행 또는 열을 주축으로 설정하여 웹 요소를 배치 정렬 하는 1차원 레이아웃 방식- flex 방식에서, 요소의 배치와 정렬은 flex container와 flex item 간의 상호작용- flex 방식을 사용하기 위해서는 display: flex 사용 ○ flex container- flex box 방식으로 레이아웃을 결정할 요소 ○ flex item- flex container 내부에서 flex box 방식으로 배치되는 요소- flex item은 기본적으로 container의 높이에 맞춰 나온다. ○ flex 축방식- 주축이 가로방향의 행으로 좌우라면 교차축은 세로방향의 열로 위아래  ■ flex-direction ○ 주축의 방향성을 결정하는 속성 ○ 행은..

■ grid layout ○ grid layout이란 - 이름 그대로 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식 - 그리드 아이템의 배치와 정렬은 컨테이너 내부 행과 열의 상호작용을 통해 결정 - flex는 주축과 교차축을 가지고 정리한다고 한다면 gird는 상호작용을 통해 결정 - grid container : 레이아웃을 그리드 방식으로 결정할 요소 - grid item : 컨테이너 내부에서 그리드 방식으로 배치 ○ 사용법 grid container에서 display속성의 값에 grid 사용 div{ diplay: grid; } ■ grid-template-columns,rows ○ grid-template-columns - grid container 트랙 중 열 내 아이템들의 크기를 지정할 ..

■ css 적용방법 ◎ html에서 연결방법 ) div > .클래스명 {} div내부에 있는 클래스인데 div의 바로 아래있는 클래스만 선택해 준다. 인접 형제 선택자 (+) div h1+h2 {} div > h1+h2 {} div내부에 있는 자손 h1의 바로 밑의 형제 h2를 선택해 준다 div바로 아래 있는 h1의 바로 밑의 형제 h2를 선택해 준다 그룹 선택자 (,) .클래스1, .클래스2 {} 클래스 1과 클래스 2를 모두 선택해 준다. 속성 선택자([]) [target] {} a[target] {} a [target] {} [target="_blank"] {} [class^="list"] {} 그외 추가적으로 속성이 target이 있는 것을 선택 a태그의 속성 target이 있는 a태그 자손중에..

■ 서체와 글 스타일 기본 ○ 기본체와 동일한 경우 서체 불러오는 방법 body { font-family:'돋움',dotum, helvetica, sans-serif } '돋움' = 서체값이 두단어 이상이거나 영어가 아닌 경우 따옴표 dotum = 영문윈도우 기반 helvetica = 맥 os기반의 컴퓨터 대비 ○ 웹에 올려 연결하는 방법 @font-face를 지원한다. @font-face{ font-family: '폰트명'; src: url(폰트경로); } ○ 구글 폰트 사이트 (http://www.fonts.google.com) html head와 head사이에 넣어야 한다. font-fmily : "xx", sans-seif; CSS에 넣어 줘야 한다. @import url(''); CSS에 넣어 ..

■ HTML 기본 템플릿 생성 ! 태크 추가 div*3 자식요소 태그 추가 div>div*3 순서대로 태그 생성 div+p+span 태그에 클래스 넣어서 만들기 div.itme*3 태그에 속성 넣어서 새로 만들기 div[class]*3 태그에 클래스 넣어서 번호매기기 div.item$@*3 태그에 아이디 넣어서 번호매기기 div#item$@*3 태그에 내용 넣어서 번호매기기 div{안녕$@}*3 안녕1 안녕2 안녕3 역순으로 넣어만들기 div{안녕$@-}*3 안녕3 안녕2 안녕1 아이디, 클래스 가진 div 태그 생성 #a$@*3 .a$@*3 ■ CSS w10 width: 10px; h10 height: 10px; m10 margin: 10px; p10 padding: 10px; t10 top: 10px..

■ CSS 란? CSS의 역할 ○ CSS (Cascading Style Sheets) - Cascading : 계단식 위에서 흐르는 - Style : 양식 - Sheets : 판, 한장 - 계단식으로 스타일을 정의하는 문서 - HTML 문서에 스타일을 더해준다. HTML은 계단식 구조를 지니고 있다. ○ CSS 기본문법 - 선택자 : 어떤 요소에 스타일을 적용할지 정보 - {중괄호} : 선택한 요소에 적용할 스타일을 정의 하는 구간 - 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보 - 속성값 : 어느정도의 수치에 맞게 정의하고 싶은지에 대한 정보 ○ html에서 연결방법 ○ CSS주석처리 p{ background-color: blue; /* p태그에 파랑 넣기 */ } ○ HTML에 CSS를 더해..

■ HTML이란? ○ HTML : HyperText Markup Language - HyperText : 하이퍼 링크(참조)를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트 - Markup : 표시 (콘텐츠를) - Language : 언어 > 하이퍼 텍스트와 콘텐츠를 표시해주는 언어 > 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어 ○ HTML은 콘텐츠를 정의 - 개발자는 HTML 코드로 웹페이지에 어떤 내용이 표시될 지를 정의함 - 완성된 HTML코드를 웹브라우저에 로딩하면 웹페이지가 만들어진다. - HTML코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라 한다. ○ HTML 문서 : 확장자가 HTML - 텍스트 편집기 : Brackets, VScode ..