본문 바로가기

Web11

HTML & CSS #16 : Flex Box Layout 플렉스 박스 레이아웃 (Flex Box Layout) Grid Layout을 기본으로, Flex Box를 원하는 위치에 배치하는 것 display 속성 배치되는 요소들을 감싸는 부모요소를 플렉스 컨테이너로 지정 display: flex | inline-flex 속성값은 flex(플렉스 박스를 박스 레벨 요소로 정의), inline-flex(플렉스 박스를 인라인 레벨 요소로 정의) flex-direction 속성 플렉스 항목 배치 방향을 지정 flex-direction: row | row-inverse | column | column-inverse flex-direction: column; 으로 지정하면 세로방향을 쌓인다. (위->아래) flex-wrap 속성 플렉스 항목을 한 줄 또는 여러 줄로 배치하는.. 2022. 12. 19.
HTML & CSS #15 : 미디어 쿼리 접속하는 미디어(device)에 따라 특정 CSS스타일을 사용할 수 있도록 하는 것! 브라우저 창의 너비가 조절될 때마다 화면에 표시되는 column 갯수가 달라지고, 사용하는 디바이스의 크기에 따라 웹사이트의 layout이 바뀌는 것이 그 예시이다. 미디어 쿼리 구문 @media [only|not] 미디어_유형 [and 조건] * [and 조건] 미디어 유형은 all, print, screen, tv, aural, braille, handheld, projection, tty, embossed 가 있다. 미디어 쿼리의 조건 - viewport (가로 너비와 세로 높이) 속성으로는 1. width, height 2. min-width, min-height 3. max-width, max-height 가 .. 2022. 12. 16.
HTML & CSS #14 : 반응형 웹 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법이 반응형 웹 디자인 이다. 화면 크기가 바뀔 때마다 반응하여 화면 요소들을 자동으로 바꾸어 구현하는 것을 의미한다. viewport 실제 내용이 표시되는 영역이다. 뷰포트를 지정하면 기기 화면, 혹은 크기가 조정된 화면에 맞추어 확대 혹은 축소해서 요소들을 표시해준다. html파일에서는 태그 안에 태그 안에 뷰포트를 지정해 줄 수 있다. 일반적인 사용법으로는 위 코드를 기억하면 된다. Grid System 화면을 여러 개의 column으로 나누어 배치하는 방법 주로 960픽셀 12 칼럼의 그리드 시스템을 사용한다. 1. 고정 그리드 : 화면 너비를 일정하게 고정하여 레이아웃을 만드는 방법 2. 가변 그리드 : 화면 너비를 백분율과 같은 가변 값으로 지정.. 2022. 12. 14.
HTML & CSS : 애니메이션 keyframes hover transition 실습 css파일 @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Gowun+Dodum&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR:wght@100&display=swap'); body { font-family: 'Do Hyeon', sans-serif; text-align: center; } .prod-list { list-style: none; margin: 0; padding: 0; } .prod-list li { position: relative; float: left; padding: 0; margin:.. 2022. 12. 14.
HTML & CSS #13 : CSS 애니메이션 변화(transform) 특정 요소의 크기나 형태 등 스타일이 변경되는 것 스타일시트에서는 수평과 수직으로 웹 요소를 변형시키는 2차원 변형과 z축을 더한 3차원 변형이 있다. translate 함수 지정한 방향으로 이동할 거리를 지정하여 해당 요소를 이동시키는 함수이다. transform: translate(tx, ty) transform: translateX(tx) transform: translateY(ty) transform: translateZ(tz) transform: translate3d(tx, ty, tz) 호버기능을 활용하여 translate함수를 적용시켜보았다. .movex:hover { transform: translateX(50px); } .movey:hover { transform.. 2022. 12. 14.
HTML & CSS #12 : CSS 선택자 연결 선택자 컴비네이션 선택자, 조합선택자 라고도 한다. 선택자와 선택자를 연결해 적용 대상을 한정하는 선택자이다. 하위 선택자 부모 요소에 포함된 모든 하위 요소에 같은 스타일이 적용된다. 자식 선택자 부모 요소 > 자식 요소 자식 요소에 스타일을 적용하는 선택자 인접 형제 선택자 요소1 + 요소2 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소만 적용 두 요소는 같은 레벨이면서 인접해야한다. 형태 선택자 요소1 ~ 요소2 형제 요소들에 스타일을 적용할 때 사용 모든 형제 요소에 적용 가능 속성 선택자 지정한 속성을 가진 요소를 찾아 적용시킬 때 사용 [속성] 대괄호를 사용하는데, 사용여부는 마음대로! a[href] { } =>이런식으로 사용하면 된다. [속성 = 값] 선택자 ==로 생각하면 된다... 2022. 12. 14.
HTML & CSS #11 : 멀티미디어 HTML5부터는 웹 브라우저에서 직접 멀티미디어를 재생시킬 수 있다. , - 외부 파일 삽입 웹 브라우저에서 직접 재생할 수 없는 pdf, 플래시 무비 등 삽입하는 태그 태그 오디오 재생 mp3 파일로 대부분 사용 width, height : 크기 조절 autoplay : 오디오 자동 재생 (크롬, 모바일 제외) controls : 컨트롤 막대 표시 loop : 반복 재생 muted : 소리 끄기 preload : 재생 전 파일 다운로드하여 준비시킴 (none : 재생눌러야 다운로드, metadata : 메타 정보만 다운로드, auto : 웹 문서를 로드할 때 미디어 파일도 모두 다운로드. 기본값은 auto) poster : 포스터 이미지(재생 불가능 시 대신 표시하는 이미지) 속성값은 "경로" 태그 웹.. 2022. 12. 13.
HTML & CSS #10 : 시맨틱 태그(semantic tag) 표준화된 시맨틱 태그를 사용하여 웹 문서를 작성하면 어떤 기기에서도 문서 구조를 정확히 할 수 있다. iframe 태그를 이용해 외부 문서(사이트) 포함시키기 제주도 게스트하우스 웹 첫 페이지 만들어보기 (기본적 내용 출처 : Do it! HTML5 + CSS3 웹 표준의 정석) css파일 @charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Gowun+Dodum&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR:wght@100&display=swap') ; * { margin: 0;.. 2022. 12. 13.
HTML & CSS #09 : CSS Layout CSS 포지셔닝 웹 문서 요소를 적절히 배치하는 것 box-sizing 속성 박스 모델 너비 값의 기준을 지정한다. content-box, border-box float 속성 요소를 왼쪽이나 오른쪽으로 floating 하게 만드는 것. left, right, none clear 속성 float 속성을 무효화 시키는 속성 none, left, right, both both 많이 사용 position 속성 웹 문서 안에 요소들을 배치하기 위한 속성 static, relative, absolute, fixed static : 요소를 문서에 흐름에 맞춰 배치 relative : 이전 요소에 연결해 배치. 위치 지정 가능. (left나 top으로 요소 이동 가능) absolute : 원하는 위치에 배치. 부모 요.. 2022. 12. 13.

티스토리툴바