윤민상 블로그

display : grid; grid-template-columns: 40% 60%; (4:6) 이거보단 grid-template-columns: 4fr 6fr; 이거를 써. 왜냐면 %는 스크롤할때 공간이생겨서 grid-template-columns: repeat(3,1fr); 1fr을 3번반복 (grid-template-columns: 1fr 1fr 1fr 이거랑 위에꺼랑 같아) grid-template-columns: 200px 1fr; 200px고정 나머지는 화면 크기 조절할때마다 움직여 grid-auto-rows: 300px; 이거는 모든 행 높이 같게 할려고 근데 이러면 height가 300보다 큰 행이 있으면 이상해 grid-auto-rows: minmax(200px, auto); 이거는 20..

플렉스 박스 레이아웃과 기본 속성들 플렉스 박스 레이아웃 : 그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치하는 것 플렉스 컨테이너 : 컨테이너 플렉스 항목 : 플렉스 컨테이너에 담기는 웹 요소 주축 : 플렉스 항목을 배치하는 기본 방향(기본은 왼->오, 수평방향; 주축 시작점, 주축 끝점) 교차축 : 주축과 교차되는 방향(기본은 위->아래; 교차축 시작점, 교차축 끝점) display : flex | inline-flex .wrapper{ display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flexx; display:flex; } flex-direction 속성 - 플렉스 방향 지정하기 flex-dire..

미디어 쿼리 이해하기 미디어 쿼리 : CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해준다. 기본형 : @media [only | not] 미디어 유형 [and 조건] * [and 조건] 연산자 : and(조건 추가), 쉼표(동일한 연산), only(미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 해) not(다음에 지정하는 미디어 유형을 제외) 미디어 유형의 종류 미디어 쿼리의 조건 뷰포트 : 실제 웹 문서의 내용이 화면에 보이는 영역 웹 문서의 가로 너비와 세로 높이 width,height | min-width, min-height | max-width, max-height 단말기의 가로 너비와 세로 높이 dvice-width, device-heig..

모바일 기기와 웹 디자인 반응형 웹 디자인 : 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것 반응형 웹의 장, 단점 1. 모든 스마트 기기에서 접속 가능 2. 가로 모드에 맞추어 레이아웃 변경 가능 3. 사이트 유지, 관리 용이(미디어 쿼리와 플렉스 박스는 최신 모던 브라우저만 지원) 모바일 기기를 위한 기본 다지기, 뷰포트 뷰포트 : 스마트폰 화면에서 실제 내용이 표시되는 영역 기본형 : ex) 스마트폰 화면 너비에 맞추고 초기 화면 배율 1 가변 그리드 레이아웃 px를 %로 변경 (요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100 가변 레이아웃과 가변 요소 가변 글꼴 : em, rem 글자 크기(em) = 글자 크기(px) / 16px em은 부모 요소의 크기에 ..

변형 2차원 변형과 3차원 변형 transform과 변형 함수 transform(45deg), scale(0.7)(1이 1배), rotate(20deg), skew(30deg) 변형과 관련된 속성들 transform-origin 속성 - 변형 기준점 설정하기 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있다. transform-origin : | initial | inherit (백분율, left, center, right | top, center, bottom | 길이) perspective, perspective-origin 속성 - 원근감 표현하기 0보다 커야하고 클 수록 밀어냄 perspective : | none ( ex) 300px) perspective-origin : | ; ( ex)..

연결 선택자 하위 선택자 - 지정한 모든 하위 요소에 스타일 적용하기 자식 선택자 - 자식 요소에만 스타일 적용하기(부모요소 > 자식요소)(손자X 자식만) 인접 형제 선택자 - 가장 가까운 형제 요소에 스타일 적용하기(요소1+요소2)(첫째 동생만) 형제 선택자 = 형제 요소에 스타일 적용하기(요소1~요소2) (ex) h1~p{...}에서 h1다음에오는 모든 형제p요소) 속성 선택자 가상 클래스와 가상 요소 사용자 동작에 반응하는 가상 클래스 1. :link - 방문하지 않은 링크에 스타일 적용 2. :visited - 방문한 링크에 스타일 적용 3. :hover - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용 4. :active - 웹 요소를 활성화했을 때의 스타일 적용 5. :focus - 웹 ..

웹과 멀티미디어 object 태그 - 외부 파일 삽입하기 data : 경로, type : 유형, name, width, heigth embed 태그 - 외부 파일 삽입하기(주로 object 태그를 지원하지 않는 이전 브라우저) src : 경로, type, width, height 비디오 : mp4, webm, ogv 오디오 : mp3, ogg 인코딩 : 원본 비디오를 압축해 컴퓨텅서 사용할 수 있는 비디오 파일로 변환 디코딩 : 비디오 정보를 가져와 비디오 플레이어에 보여 주는 과정 HTML5에서는 플러그인 프로그램 없이 브라우저에서 직접 재생할 수 있는 비디오 코덱만 허용. 3가지 1. H.264/AVC : mp4, 고화질 지원, 멀티미디어 업계 표준, 유료지만 온라인상에서는 무료 2. v8, v9 :..

header 태그 - 머리말 지정하기(주로 form 검색, nav 메뉴) nav 태그 - 문서를 연결하는 네비게이션 링크 section 태그 - 주제별 콘텐츠 영역 나타내기 article 태그 - 콘텐츠 내용 넣기 aside 태그 - 본문 이외의 내용 표시하기 iframe 태그 - 외부 문서 삽입하기(width, height, name, src, seamless(테두리 없애, 크롬, 사파리만 지원) footer 태그 - 제작 정보와 저작권 정보 표시하기 address 태그 - 사이트 제작자 정보, 연락처 정보 나타내기(주로 footer 안에서) (transition) IE8이하에서 시맨틱 태그를 사용하기 https://github.com/aFarkas/html5shiv aFarkas/html5shiv T..