전체 글 (12) 썸네일형 리스트형 반응형 웹디자인 | 반응형 CSS 단위 EM과 REM 정리 #6 www.youtube.com/watch?v=xWMKz9NCD0k 언제 어떤걸 쓰면 좋을까?? 1. Parent 요소에 따라 사이즈 변경: % ,em browser 사이즈에 반응: v*, rem 2. box 요소의 너비와 높이에 따라 사이즈 변경: %, v* font 사이즈에 따라 사이즈 변경: em, rem em과 rem 차이?? 어떤 디자인인지, 원하는 기능에 따라 em, rem 좋아요 버튼 component를 만든다고 가정하자 버튼의 글자를 rem을 써서 사이즈 만들면 root의 폰트사이즈에 따라 크기 결정되므로 페이지의 제일 상위 요소인 body에서 component를 사용할 때와 다른 component안에서 버튼을 쓸때와 크기 변동사항이 없다. rem을 사용하므로 부모 컨테이너에 있는 폰트 사이즈.. 반응형 웹디자인 | CSS 반응형 유닛 정리 #5 반응형 CSS 단위 총정리 (EM과 REM) www.youtube.com/watch?v=7Z3t1OWOpHo&feature=youtu.be CSS 문법 Selector: 요소중 어떤 요소를 선택할지 property: 어떤 속성들을 꾸며줄 건지 values: 속성에 해당값 value 중 요소의 크기 결정을 볼것이다 absolute, relative pt는 문서에서 폰트 사이즈 조절할 때 많이 쓰임 브라우저에서 px로 변환되어 스크린에 표기된다 px = 모니터 위에서 화면나타낼 수 있는 가장 작은 단위 px 사용시 문제점??? 컨테이너 사이즈가 변경되어도 컨텐츠가 그대로 고정 사용자가 브라우저에서 폰트 사이즈 설정을 바꿔도 전혀 반응하지 x 대부분은 고정된 px보다 % (예) 부모의 80% 상대적 유닛 em.. 반응형 웹디자인 | HTML, CSS 반응형 정리 #4 www.youtube.com/watch?v=8-uJ_4136uI 반응형 웹디자인 다양한 사이즈의 테블릿과 핸드폰에서 웹사이트을 이용할 때 유용 반응형으로 웹사이트를 만들면 사이즈에 따라 컨텐츠들이 유동적으로 변함 Content is like water 컨텐츠를 물과같이 유동적으로 만들어라! 어떤 컨테이너에 담기든지 상관없이 컨텐츠가 잘 보여져야한다. 유동적이기 위해 요즘은 고정적인 px 대신 Flex grid, Flex box, %, vw, vh 사용 컨텐츠가 자동적으로 늘어나거나 줄어듦. but 어느 수준 이상으로 줄어들면 레이아웃 재배치됨. 데스크탑: 3개 feature tablet: 2개 컨텐츠 mobile: 1개 컨텐츠 강조하고자 하는 내용을 위로 배치 // 유동적 @media 스크린이 min-w.. CSS Flexbox 완전 정리 #3 www.youtube.com/watch?v=7neASrWEFEM Flexbox: 박스와 아이템을 행, 열로 자유자재로 배치시킬 수 있음 박스가 커지면 각각 item들이 어떤식으로 커지면서 박스 공간을 매꾸는지 박스가 작아지면 item들이 어떻게 작아져서 박스 안에서 유연하게 배치되는지 이때 flexbox가 쓰인다 => layout 구성 과거에는 모든 브라우저에서 호환가능한 레이아웃 만들기 위해 position, float, table을 이용해 layout 지금은 flex box float FlexBox 2가지 이해 1. Container box에 적용되는 속성값이 존재 Item에 적용되는 속성값 존재 1) container에 꾸며줄수 있는 속성 display flex-direction flex-wrap .. CSS 레이아웃 정리 display, position 완성 #2 www.youtube.com/watch?v=jWh3IbgMUPI 웹사이트 만들때 가장 중요한것? 박스들을 원하는 위치에, 원하는 사이즈로 배치 이때 필요한 것 display, position block level, inline level의 차이점 display div는 block level span은 inline level span { disply:block; }으로 block level로 변경가능 inline은 물건, content 자체만을 꾸며주는 것 inline-block은 한줄에 여러개 넣는데 block단위로, content와 상관없이 설정한 사이즈로 표기 block은 상자인데 한줄에 하나 position 웹사이트 박스 배치 .container { background: yellow; left: 2.. CSS 셀렉터 #1 www.youtube.com/watch?v=gGebK7lWnCk&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=7 CSS = Cascading Style Sheets = 종속형 시트= 마크업 언어가 실제 표시되는 방법을 기술하는 언어 HTML, XHTML, XML에서 쓰이고 W3C의 표준. 레이아웃과 스타일을 정의할 때의 자유도가 높다. 마크업 언어 (ex: HTML)가 웹사이트의 몸체, CSS는 옷과 액세서리처럼 꾸미는 역할 HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다. 현재 개발 중인 CSS3의 경우 그림자, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능 추가되었고 애니메이션 기능 추.. HTML 태그 완성 www.youtube.com/watch?v=OoA70D2TE0A 1. 뭐든지 나누어 보기 서비스 세분화 클래스를 세부적으로 나눌 수 있지 않을까 함수도 세부적으로 나눌수 있지 않을까 2. 큰 그림을 먼저 보자 >태그는 box / item 중 하나이다 website design 1. BOX 태그 header footer nav aside main section article: 조금더 반복되는 재사용가능한 것들 묶어놓은것 div: 흔히 아무데서나 쓸수있음. 묶어서 스타일링 할 때 span: form 2. ITEM 태그(사용자에게 보여지는) a: 링크 걸수있는 태그 button input label img video audio map canvas table ITEM에는 Block / Inline 으로 나눠짐... HTML 기초1 www.youtube.com/watch?v=i0FN-OwJ7QI HTML = HyperText Markup Language 웹 페이지를 위한 지배적인 마크업 언어 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법 제공 이미지와 객체를 내장하고 대화형 양식을 생성하는데 사용될 수 있다. 태그 로 되어있는 요소 형태로 작성한다. 웹 브라우저와 같은 html 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과 그 밖의 항목의 외관과 배치를 정의하는 css 같은 스크립트를 포함하거나 불러올 수 있다. -위키피디아 Markup Language 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한가지 HTML.. 이전 1 2 다음
