윤민상 블로그

모바일 기기와 웹 디자인 반응형 웹 디자인 : 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것 반응형 웹의 장, 단점 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)..

4계층의 역할과 개요 4계층 이상의 상위 계층에서는 데이터를 운반하는 직접적인 동작은 하지 않는다. 4계층 이상의 상위 계층에서는 전달할, 전달된 데이터에 대해 필요한 처리를 함. 3계층까지는 수신처 자체가 존재하지 않거나 데이터가 도중에 손실됐거나 에러에 의해 파기됐다는 등의 문제들은 신경쓰지 않는다. => 4계층이 에러 복구(역할1) 흐름제어 : 신뢰성이 높은 통신을 위해서 에러를 복구하고 통신 상태도 확인한다.(역할2) 실은 데이터를 주고받는 것은 애플리케이션이다. 포트 번호 : 어느 애플리케이션이 송수신할지를 결정하는 번호 TCP/IP에서 실제로 이런 제어를 행하는 것이 TCP와 UDP라는 두 프로토콜. 통신할 때 둘 중 어느 한 쪽이 사용. because TCP와 UDP는 역할이 다름 커넥션과 ..

연결 선택자 하위 선택자 - 지정한 모든 하위 요소에 스타일 적용하기 자식 선택자 - 자식 요소에만 스타일 적용하기(부모요소 > 자식요소)(손자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..

CSS 포지셔닝과 주요 속성들 box-sizing 속성 - 박스 너비 기준 정하기 content-box(너비 값, 기본 값) | border-box(테두리까지포함, 마진은 포함x) float 속성 - 왼쪽이나 오른쪽으로 배치하기 left | right | none clear 속성 - float 속성 해제하기 none | left | right | both left는 left 해제, right는 right 해제, both는 둘다 해제 로렘 임숨(Lorem Ipsum) : 의미없이 내용을 채워주는 것 http://guny.kr/stuff/klorem/ 한글 Lorem Ipsum (간세네) 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레..

CSS와 박스 모델 블록 레벨 요소와 인라인 레벨 요소 : 블록은 한줄, 인라인은 화면에 표시되는 콘텐츠만큼만 영역 차지 display : none | contents | block | inline | inline-block | table | table-cell 등 테두리 관련 속성들 border-style 속성 - 테두리 스타일 지정하기 border-width 속성 -테두리 두깨 지정하기 | thin | medium | thick border-color 속성 - 테두리 색상 지정하기 border 속성 - 테두리 스타일 묶어 지정하기 | | border-radius 속성 - 박스 모서리 둥글게 만들기 | 타원형태는 border-top-left-radiuse :