이해강의 가슴 뜨거워지는 개발일기

https://www.boostcourse.org 다 함께 배우고 성장하는 부스트코스 부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다. www.boostcourse.org 출처입니다. 이번에 만들어 볼 1단 메뉴 디자인입니다. 먼저 마우스를 올리면 초록색에 글이 두꺼워지고 action을 취하면 저렇게 배경이 회색 글이 하얀색 그리고 두꺼워지게 만듭니다. 메일 카페 소프트웨어 지식백과 영화 먼저 html을 구성합니다 @charset "UTF-8"; /* 기본 스타일 */ body { font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif; font-size: 14px; line-height: 16px; } bod..

https://www.boostcourse.org 다 함께 배우고 성장하는 부스트코스 부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다. www.boostcourse.org 출처입니다. 고정 레이아웃을 제작할 때 핵심이 되는 것은 fixed입니다. 위치를 고정시켜서 드레그 했을 때 고정돼야 되는데 이를 할때 fixed를 할 경우 1번 그림처럼 content영역이 말려들어가 버립니다. 그럼 우리가 봐야 되는 콘텐츠 부분이 가려지게 되는데 이를 막기위해 padding과 margin box-sizing: border-box를 이용하여 해결합니다. header content footer .header{ height: 100px; background-color: lig..

https://www.boostcourse.org 다 함께 배우고 성장하는 부스트코스 부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다. www.boostcourse.org 출처입니다. header content aside footer 1단 레이아웃과 달리 이번에는 content와 aside로 구분하여 나란히 정렬된 레이아웃입니다. .header { height:100px; background-color: lightgreen; } .container { width: 800px; margin: 0 auto; } .content { float: left; /* float */ width: 500px; /* 가로사이즈 추가 */ height: 300px; backg..

https://www.boostcourse.org 다 함께 배우고 성장하는 부스트코스 부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다. www.boostcourse.org 출처입니다. header content footer header content footer 위와 같이 두 가지 방식의 구성이 있다. 이는 html5 시멘틱 태그가 생기면서 더 의미 있는 태그를 만들 수 있게 되었다. max-width: 1200px; /* 최대 가로길이 1200px */ min-width: 800px; /* 최소 가로길이 800px */ 이처럼 최소길이 최대길이를 지정할 수 있는데 만약 늘리거나 줄일 때 저 조건이 되면 더 이상 늘어나거나 줄어들지 않는다 최소 길이보다 더 ..

https://www.boostcourse.org 다 함께 배우고 성장하는 부스트코스 부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다. www.boostcourse.org 출처입니다. - 흐름에서 벗어나서 띄워지게 한다. - 주변 텍스트나 인라인 요소가 주위를 감싼다. - 부모 요소에 [ height 부여 -> 눈속임 같은 경우입니다. 그냥 크기를 키워주는 건데 내부에 자식이 커지면 거기에 대응하지 못합니다. - 부모요소에 float 속성 포함 -> 부모 요소에 float를 이용하는 것은 다르게 보면 부모도 float이 되어 같은 문제가 부모에게 일어날 수 있습니다. - 부모요소에 overflow : (visible 속성 제외) 사용 -> 쓰게 되면 우리가 ..

https://www.boostcourse.org 다 함께 배우고 성장하는 부스트코스 부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다. www.boostcourse.org 출처입니다. 알면 알수록 즐거운 네이버쇼핑 윈도시리즈 쇼핑 즐기고 10%적립 혜택도 받으세요! 100 포인트만 있으면! 포인트 100원 이상 보유 시 신청 가능(신청 확인용으로 차감되지 않습니다.) 포인트가 부족하다면? 쇼핑윈도 시리즈 즐기고~ 11.15 ~ 11.30 누적 1만원 이상 구매 구매금액 10%적립 최대 1만원 네이버페이 포인트 적립 신청하기 유의 사항 BIG3 쇼핑 이벤트와 중복으로 신청하실 수 없습니다. 내부 사정에 따라 공지 없이 신청 종료될 수 있습니다. ol { lis..

https://www.boostcourse.org 다 함께 배우고 성장하는 부스트코스 부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다. www.boostcourse.org 출처입니다. 프로모션 페이지를 이미지로 처리한 경우가 많은데 눈에 보이지 않더라도 시멘틱 하게 마크업 하는 게 좋다. 예시로 준 과제가 있는데 이를 먼저 해보는 과정을 적고 밑에 강의를 보고 피드백할 예정이다. 먼저 과제는 이렇게 진행되었다. 이 이미지를 시멘틱하게 바꾸는 과정인데 조금 어려울 수 있어서 필요한 태그가 뭔지 다 알려주셨다. HTML : h1, ol, ul, p, strong, a, div 해보면 이런 식으로 작성했는데 알면 알수록 즐거운 네이버쇼핑 윈도시리즈 쇼핑 즐기고 1..

https://www.boostcourse.org 다 함께 배우고 성장하는 부스트코스 부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다. www.boostcourse.org 출처입니다. IR은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것입니다. 태그의 alt 속성 값으로 표현하기에 대체 텍스트가 너무 길거나, CSS background 속성을 사용하여 처리한 의미 있는 이미지일 경우, 마크업으로 대체 텍스트를 제공합니다. (나쁜 경우) : 스크린 리더가 인식하지 못하는 경우 1) visibilty : hidden; 2) display : none 3) width : 0; height : 0; font-size : 0; ;ine-height..

background-position 속성 값 left top 왼쪽 상단 left center 왼쪽 맨 아래 left bottom 왼쪽 맨 아래 right top 오른쪽 상단 right center 오른쪽 중앙 right bottom 오른쪽 맨 아래 center top 가운데 상단 center center 정 가운데 center bottom 가운데 맨 아래 둘 중 하나만 쓰면 나머지는 자동으로 center가 된다 이거 때문에 쩔쩔맴,,,ㅋㅋ

구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성의 값이 클수록 우선으로 적용이 됩니다. 1, 0, 0, 0 : inline 스타일 (HTML 파일에 직접 style=""로 명시하는 것) 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값(#) 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값(.), 기타 속성, 가상 클래스 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소 0, 0, 0, 0 : 전체 선택자 조합자는 구체성에 영향을 주지 않는다. (>, + 등)