📚HTML, CSS/이론 정리 16

반응형 웹사이트 제작이론[기본 스타일, 1단 2단 메뉴]

css reset 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 @charset "UTF-8"; /* 기본 스타일 */ body { font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif; font-size: 14px; line-height: 16px; } body, ul, ol, li, div, a { margin:0; padding:0; } ul, ol { list-style:none; // list 앞에 표시x } a..

반응형 웹사이트 제작이론[고정 레이아웃]

상단 고정하기 container(.wrap, height: 100%, 현재 content만 감싸는 중. header는 x)가 footer가 화면에서 안보일 만큼 높이를 차지하고 있었는데, margin -100px;을 통해서 container가 화살표 만큼 올라가서 footer가 보이게됨 그래서서 content의 높이가 100px 작아짐 아래에 보시다시피 300px의 content가 margin-top -100px 되기 전까지는 잘리지 않고 300px 그대로 유지중인 걸 확인가능. margin-top -100px 하니깐 content가 잘려서 작아진 200px의 높이가 된것을 확인할 수 있다. container의 하부내용인 content를 화면안으로 100px, header 아래에서 나오기 위한 100px..

반응형 웹사이트 제작이론[레이아웃 1단,2단]

1단 레이아웃 제작 스타일 정보 컨텐츠 최대 가로 길이: 1200 사이트 최소 가로 길이: 800 컨텐츠 가운데 정렬 주요 태그 및 속성 HTML div header section footer CSS max-width min-width margin max-length 최대 늘어나는 길이 min-length 최소 줄어드는 길이 감싸는 부모요소 wrap에 최소 길이 min-length를 사용했다면 자식요소에서는 적어줄 필요가 없다. 아래처럼 wrap으로 감싸주게 된다. 태그는 block 요소임. 태그나 header, section footer div 등은 block 요소이니 가운데 정렬은 margin: 0 auto;를 이 header content footer header content footer 다단 레..

반응형 웹사이트 제작이론[css리셋, IR기법, float 해제]

css reset 크로스 브라우징: 어떤 웹 브라우저를 써도 화면이 똑같이 나오고, 입력과 사용에 문제가 생기지 않도록 하는 것. CSS 리셋: 모든 브라우저에서 똑같은 화면을 볼 수 있도록 기본값을 초기화하는 것, 정해진 형식이나 코드는 없음. inline 요소의 여백 없애기 1. display로 block 요소로 변경 2. vertical align: top; 으로 변경 요소 숨김 처리(너무 설명이 긴 이미지, 내용이 너무 긴 경우 사용) ㅡ> 따로 숨김처리 해놓고, 글자 인식은 되는 화면을 만들어 주는 것. 권장 사용방법 relative로 clip_wrap 영역 지정한뒤, 그 안에서 absolute가 놀게 함. absoulte는 top, left 등 자리 값을 지정해 주지 않으면, 그냥 그 자리에 ..

미디어 쿼리(미완성 정리)

타입은 보통 screen print all 이 쓰이지만 대부분 screen만 자주 사용됨. 속성에는 width, orientation 두가지 속성. width는 넓이, orientation은 화면이 가로로 되있는지 세로로 되어 있는지 구분 짓는 속성. *S : 여백 [ a ] : a가 나올 수도 있고 나오지 않을 수도 있습니다. a | b : a 또는 b 둘 중에 하나를 선택합니다. "|"는 파이프 라인 기호로 키보드의 역슬래시(\) 키를 Shift 키를 누른 채로 누르면 나옵니다. a? : a가 0번 나오거나 1번만 나올 수 있음 a* : a가 0번 나오거나 그 이상 계속 나올 수 있음 media_type : all, screen, print 등 명세에 정의된 미디어 타입 media_feature : ..

CSS 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등

https://www.codingfactory.net/12593#transform_translate CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성 CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회 www.codingfactory.net 차차 더 채워나가보자. 부족한 부분이 있네 역시.

웹 UI개발 정리[ 레이아웃]

display 속성 요소의 렌더링 박스 유형을 결정하는 속성입니다. 기본 값 : - (요소마다 다름) display: value; none 요소가 렌더링 되지 않음 inline inline level 요소처럼 렌더링 block block level 요소처럼 렌더링 inline-block inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 * height 나 width 등과 같은 박스모델 속성을 적용할 수 있다 그외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재 display: none의 예시 display: inline의 예시 inline-block요소 (inline 처럼 화면에 나타나지만 block의 ..

웹 UI개발 정리[ font~]

font-family 속성 글꼴을 지정하는 속성입니다. font-family(필수) 글꼴의 이름을 지정 font-family: family-name | generic-family ( | initial | inherit ); family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있습니다. 먼저 선언된 순서대로 우선순위가 결정됩니다. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언합니다. generic-family: family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인..

웹 UI개발 정리[ css(5)box-model]

background 관련 속성 background-color, background-repeat, background-attachment, background-position 속성의 기본값들(순서대로) : transparent, repeat, scroll, 0% 0% background-color 기본 값 : transparent 배경의 색상을 지정하는 속성입니다. 앞선 색상 강의에서 배운 색상 값 적용 방식과 같습니다. background-position 기본 값 : 0% 0% 요소에서 배경 이미지의 위치를 지정하는 속성입니다. x축, y축으로부터의 위치를 지정할 수 있으며, 값의 선언 순서는 x축, y축으로부터의 간격입니다. 만일 한쪽만 지정된다면 나머지는 중앙 값(center)으로 적용됩니다. bac..

웹 UI개발 정리[틀린 것만 복습| html ~css(4)](가상, 선택자, 케스케이딩 등)

: bold, 글자 굴게 : italic, 이태릭체로 기울게 : underline, 밑줄 : strike, 글자 중간 줄 ㅡ> 아 태그 dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용합니다. 은 앞서 배운 , 과는 구조가 조금 다릅니다. , 은 항목을 단순히 나열하는 구조지만, 은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조입니다. 리플리 증후군 허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어 피그말리온 효과 타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상 언더독 효과 사람들이 약자라고 믿는 주체를 응원하게 되는 현상 : 용어를 나타..