오늘보다 더 나은 내일

1. 통계청 - 국가통계포털 https://kosis.kr/index/index.do KOSIS 국가통계포털 kosis.kr 2. 통계청 - e나라지표 https://www.index.go.kr/main.do e-나라지표 메인화면 www.index.go.kr 3. KIEP 대외경제정책연구원 http://www.kiep.go.kr http://www.kiep.go.kr www.kiep.go.kr 4. KDI 한국개발연구원 http://www.kdi.re.kr KDI 한국개발연구원 KDI는 한국경제 발전과 선진화의 초석을 마련한 대한민국 최고의 Think Tank이다. 1971년, KDI는 한국의 경제?사회 발전을 위한 계획을 수립하고, 정책을 제시함으로써 국가 경제 번영에 이바지할 목 www.kdi.re...

1. 바이스 버사 vice versa https://v-vdesign.com/ 바이스 버사 디자인 스튜디오 2010년 9월 1일 설립된 바이스 버사 디자인 스튜디오(Vice Versa design studio)는 국내 최초의 인포그래픽 전문 디자인 스튜디오입니다. 다양한 데이터를 비주얼 스토리텔링(visual Storytelling)을 통해 보다 v-vdesign.com 2. infogram https://infogram.com/examples Best Examples of Charts, Reports, Infographics and Maps - Infogram Get inspired by this wonderful collection of charts, reports, maps, infographics..

※ 라이브러리에 bg-red{background-color:red;} 속성을 만들어 배경색이 필요한 요소에 그때 그때 사용해준다. ※ 메뉴 사이 구역선 만들기 - 글자 높이와 비슷한 선을 만들기 위해서 border는 사용 불가함. - a 요소에 ::before, ::after를 이용하여 content:"";, background-color 이용하여 선 생성 - position:absolute 값 지정하고 대략적인 위치, top.left: 0지정 - 세부적인 수직중앙 정렬은 transform:translatex(-50%) translatey(-50%)로 맞춘다 BRAND VISUAL STYLE MEDIA NEWS STORE CUSTOMER /* 노말라이즈 */ body, ul, li { margin:0; ..

1. max-width - display:block 일때 최대값을 지정하여 너비를 유연하게 하면서도 기준값 이상 커지지 않게 하는 속성

1. float - 상단메뉴 만들때: 한줄에 나오게 하여야한다 1) display: inline-block 텍스트 요소 사이 공백이 생긴다 (정교한 디자인이 어렵다, 하나하나 수치 수정해야한다) 2) float: left 공백이 없다 (너비를 %로 지정하면 자동으로 나눠서 맞춰준다.) * 공백 없애는 방법 1) li엘리먼트 사이 엔터 공백을 하나하나 지운다 2) li엘리먼트 사이 엔터 공백을 주석(/*)을 달아 없애준다 3) CSS font-size-0를 따로 만들어준다 4) li에 float:left;를 준다. - block요소는 float요소를 무시한다 → 자식 요소에 float을 썼다면 부모요소는 자식 요소가 없는 줄 알고 높이가 최소화 된다 그래서 부모요소에 class="row"를 주고 반드시 아..

1. 중간정리: 웹 퍼블리싱 : HTML, CSS, JS HTML 1)태그 - div 계열(block 계열) ex) section, article, nav, ul, li - span 계열(inline 계열) ex) a, img, span 2)관계: 부모자식, 형제 CSS 1) display - inline, inline-block: 글자화(가로) - block: 블럭화(세로) - none: 사라진다 * 중앙정렬: block {margin: 0 auto;} inline-block {text-align:center;} 2) position - static: 사람 - relative: 사람, 유령집 - absolute, fixed(스크롤 따라다닌다):유령, 유령집 2. 좌측 사이드 토글바 만들기

1. position-fixed - 스크롤바를 따라 다닌다 - 유령: absolute,fixed/사람:relative,static 2. ::before/ ::after - 공통되는 데이터가 엘리먼트의 말머리나 말미에 넣어야 할때 CSS 속성을 부여하여 한번에 바꿔줌 - 선택 엘리먼트와는 부모자식 관계이다.(before는 가장 첫째 자식, after는 가장 막내자식) - ul > li::after { content:"님"; } 입력시 모든 div텍스트 뒤에 님이 표시됨 - 기본 display는 inline이다 연예인 1 연예인 2 연예인 3 연예인 4 연예인 5 연예인 6 연예인 7 연예인 8 연예인 9 연예인 10 /* ::after => 새로운 막내자식을 추가한다. */ ul > li::after { ..

1. white-space: nowrap; - 자동 줄바꿈 금지 - 영역이 한정될 경우 텍스트가 영역외로 나가게 된다 2. overflow: hidden; - 영역외로 나간 텍스트를 숨기는 기능 3. overflow: scroll; - 스크롤을 생성하여 보여주게 한다 4. overflow: auto; - 텍스트 길이가 영역외로 나가면 스크롤 생성/ 영역 내이면 스크롤바 작동하지 않음 * 영역내에서만 보이게 잘리고 말미에 ...표시 { white-space: nowrap; overflow: hidden; text-overflow:ellipsis } 5. 3차 메뉴 쉽게 구현하기 1. HTML 입력 nav.menu>ul>li*4>a[href="#"]{1차 메뉴 아이템 $} +ul>li*4>a[href="#"..

보호되어 있는 글입니다.

1. position- absolute 정렬/translate x, translate y - 수평 중앙정렬: block요소 처럼 {margin: 0 auto;} - 수직 중앙정렬: {margin: auto 0;} = 불가능 - 수직 수평 중앙정렬: 1. {top, left: 50%;} → 중앙 쯤이지만 좌측 상단 꼭지점 기준이므로 세부 위치 조정 필요 {transform: translate x: -50%, translate y: -50%; } → 자기 넓이의 반akszma왼쪽이동, 자기 높이의 반 만큼 위로 이동 2. {top:x % left: x % bottom: x % right: x % ;} → 그러나 넓이가 유동적이다 3. {top:x px left: x px bottom: x px right: ..

1. (CSS) display-none - 사라진다 - div:nth-child(2): 두번째자식이면서 div인 엘리먼트 - div:nth-of-type(2): div중에서 두번째 엘리먼트 - a ~ div: 동생선택자(부모, 형 선택자는 없음) - a + div: 인접동생 선택자 버튼 안녕 잘가 a + div { display:none; } a:hover + div { display:block; } 버튼에 커서를 올리면 디스플레이 none이던 내용들이 나타난다 2. (CSS) position static relative absolute fixed 너비 유지 최대한 줄어든다 본질 사람 사람,유령의 집 유령,유령의 집 유령,유령의 집 스크롤바 따라다님 겹침 불가능(주변 영향을 줌) 가능(주변 영향을 주지 ..

1. (CSS)body 엘리먼트 노멀라이즈 - 컴퓨터가 유저의 편의를 위해 임의로 지정된 스타일이나 기본값을 코딩시작전 평범한스타일로 만들어주는것 - body { margin:0; } - a { color:inherit; text-decoration:none;} 2. (HTML,CSS) Class 속성 - 주로 사용되는 태그(div,nav,section,article)한정되어있기 때문에 특정엘리먼트에 특정 속성값을 줄때 별명(class)을 붙여준다 ex) HTML: CSS: .menu-box{~~~} - 하나의 태그에 무한대 부여가능 - 클래스 속성값은 유저 마음대로 부여가능 - 숫자로 시작하는 속성값은 부여할 수 없음 * HTML작성: 클래스 속성값 여러개 부여 시 , 사용금지! 띄어쓰기 * CSS작성..