Jung Yoon's study 고정윤

해당영상 8강 8강~15강메모 1. 상대주소 : 본인이 가지고 있는 파일을 기준으로 불러오는 것 절대주소 : https등의 사이트 주소 2. repeat-x : X축으로 (가로) 반복 됩니다. 3. background:url(../img/header_bg.jpg) center top repeat-x; (속기형 작성법 입니다.) 백그라운드 : 이미지의 상세주소 / 이미지의 위치(position) 센터 와 탑 으로 고정 / x축(가로)로 반복됨 4. 자주쓰는 핵심 태그들이 인라인 구조인지 블럭구조 인지 정도의 개념은 알고 가면 아주 좋아요!! 5. 인라인 구조에는 전체 영역이 없어요. 그래서 text-align 이 먹히지 않아요. 6. 인라인한테 padding 를 주면 양옆은 그 값이 들어가지만 위 아래는 ..

해당영상바로가기 6번의 레이아웃을 더욱 세분화 하여 작업한 레이아웃입니다. 점점 소스가 길어지고 있기때문에 주석표시와 열을 잘 맞추어 보기 쉽게 해야 할 것 같습니다. 부모안에 자식이 있고 그 자식안에 또 자식이 있는 구조라 점점 구조에 유념하여 공부해야 할 것 같아요!!!

해당영상바로가기 "container" 을 이용해서 영역을 잡는 수업이였습니다. 소스를 가볍게 하기 위해 생략이 가능한 것들은 생략을 하면서 하면 좋을 것 같습니다. rgba = r(red) / g(green) / b(blue) / a(alpa:투명도 0~1값으로 입력)

해당영상 바로가기 기본 여백값(간격)을 없애주기 위해서 *{margin : 0 ; padding : 0} 을 적용합니다. (*{}:이건 전체 선택자를 의미합니다.) 하지만 실무에서는 전체 선택자를 잘 쓰지 않습니다. width 값 100%로 합니다. 이렇게 적용하면 화면을 줄이고 늘려도 전체를 차지하고 있습니다. width 의 기본값은 100% 이기 때문에 소스를 가볍게 하기 위해서 생략할 수 있습니다. (저는 처음에 적었지만 나중에 가변은 소스를 위해 지웠습니다.) 부모와 자식의 height 값이 같다면 부모의 height값은 생략 가능합니다.

해당영상바로가기 다양한 레이아웃 만들기를 합니다!! 이번 레이아웃의 모양의 위와 같습니다. 처음에 배운 내용을 바탕으로 스스로 해 본 후 선생님과 비교해 보면 더 도움이 많이 되는 것 같습니다:) 부모들은 id 로 그 아래 자식들은 class로 하는 것이 보기에 편하고 하기에도 편한 것 같습니다!!

해당영상바로가기 다양한 레이아웃 만들기를 합니다!! 이번 레이아웃의 모양의 위와 같습니다. 처음에 배운 내용을 바탕으로 스스로 해 본 후 선생님과 비교해 보면 더 도움이 많이 되는 것 같습니다:)

해당영상바로가기 오늘 수업의 핵심 css는 'clear:both' float:left 를 사용해서 영역이 사라지게 되는데, 이를 피하려면 clear:both 를 이용하면 됩니다. clear 는 '취소하다'라는 뜻으로 clear:both는 float 의 오른쪽 왼쪽 값을 모두 취소합니다.

해당영상으로 가기 1. float으로 블록요를 가로로 정렬하면 생기는 문제 점(버그) float을 쓰면 height 값이 '0'으로 인식이 됩니다.(즉, height 값이 사라짐=영역이 사라진다.) 따라서 눈에는 보이지만 그 영역이 사라짐으로 전체적인 영역이 깨지게 됩니다. 이 방법을 해결하기 위해서는 여러가지 방법이 있는데, 이번 영상에서는 아래와 같은 방법을 씁니다. (가) footer(영역이 깨져 보이지 않게 된 부분)에도 'float:left' 를 줍니다. -하지만, 해당 방법 또한 여러 문제를 동반하기 때문에 흔히 사용하지는 않습니다. 2; margin을 이용하여 컨텐츠를(블록구조를) 가운데 오게 하는 방법 (가) 가운데로 올 부모값(전체영역)에 'margin : 0 auto' 를 줍니다. - ..