본문 바로가기

분류 전체보기166

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.
자바 : 피라미드 * 만들어보기 2022. 12. 14.
자바스크립트#04 : 반복문 배열 (array) 여러 자료를 묶어서 활용할 수 있는 특수한 자료 참조 변수에 넣어서 처리한다. (배열의 참조변수는 상수! 따라서 const 처리 해줄것!) 자바스크립트의 배열은 '자료구조-배열'이 아닌 '자료구조-리스트'로 이해하면 된다. 기존 문법의 배열은 모든 공간이 같은 자료형을 갖고 있어야 하지만, 자바스크립트의 배열은 다양한 형태의 데이터를 배열에 넣을 수 있다. 심지어 함수까지도 넣을 수 있다. 아래 사진과 같이 배열의 요소갯수와 함께 요소가 나타난다. 인덱스 배열 인덱스는 다른 언어와 마찬가지로 0부터 시작한다. 배열 요소 개수 배열.length 배열 요소 추가 1. 배열 뒷부분에 요소 추가 : .push("요소") 처음 todos는 삭제되고 가장 최근의 새로 생성된 todos가 새로 생.. 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.

티스토리툴바