JH 개발 블로그

오늘은 자기소개 웹사이트를 한번 만들어 보았다! 그리고 1년 전에 만들었던 유튜브 드림 코딩의 유동적인 상단 헤더바 만들기 영상을 다시 보고 따라 만들었다. 하나도 기억 안난다...★ 개발은 꾸준히 하지 않으면 감을 잃는 것 같다. 나 자신 좀 더 분발하자 Today 자기소개 웹 사이트 만들기 깃허브로 웹 호스팅하기 Tomorrow 유튜브 반응형 웹 만드는 방법 알아보기 자기소개 웹 사이트 최종본 만들기 그리드 사용법 공부해보기

header { } header .gnb { width:100%; background-color:#353535; } header .gnb ul { overflow:hidden; width:1000px; height:30px; line-height:30px; margin:0 auto; } /* line-height 같이 지정해야 수직 가운데로 정렬 된다! */ header li{ float:left; list-style:none; margin-left:50px; font-size:.9em; } float 속성이 너무 어렵다고 생각 되었는데 오늘 어디서 주워듣기론 새로운 기술인 flex 속성을 사용하면 더 편하게 사용할 수 있다고 한다. 순간 급 의욕이 떨어졌다.... 그래도 다음 사이트를 소스 검사 해보니..

이번 시간은 강사님이 한거 보고난 뒤 안보고 스스로 야후 사이트(언제적 야후 사이트냐....) 를 만들어보기로 했다. 강사님이 만든 것↓ header 의 경계가 살짝 헷갈렸는데 강사님은 search 창까지 묶어주었다! 상단 header_nav 부분에서 리스트와 FireFox 부분 모두 각각 div 로 묶었다. 그리고 리스트는 그대로 냅두고 FireFox 부분을 float: right 속성을 주었다. 상단 div id=header_info 부분에서 야후 로고 이미지, 검색창, 서비스 모두 div class 로 묶었다. -> div 로 다 묶어주는구나.... 또한 로고 이미지에 float : left 속성을 주고, 서비스는 float..

first second first second 코드를 안보고 맞게 잘 구현했으나 가독성이 조금 부족한 것 같다고 느껴져서 복습하자는 의미로 코드를 올렸다. 이렇게 width 와 margin: 0 auto 를 한 줄에 써주고, 각 객체의 너비와 높이도 한 줄에 쓰니까 좀 더 보기가 편안해 보였다. 그리고 overflow : hidden 속성을 "감싸고 있는 객체" 에게 꼭 써주자는 걸 명심하자! 서울시 중소기업의 지식재산 역량제고를 통한 신성장동력 창출 Seoul Intellectual Property Center 「서울지식재산센터」는 서울소재 중소·벤처기업을 대상으로 지식재산 종합컨설팅, 국내·외 특허출원 지원 등 지식재산권에 대한 One-Stop Total Solution을 제공하여 기술혁신을 통한 기..

menu1 menu2 menu3 menu4 menu5 line-height 는 행간 사이즈 조절. height : 300px 인데, line-height : 300px 로 주면 수직 가운데로 올 수 있다. body 부분이다. HTML5, CSS3 Document To. all member html5, CSS3 study is very easy html5, CSS3 study is very easy html5, CSS3 study is very easy From. SBA 서울산업진흥원 a 태그↓ _blank : 새 창에서 열림 style 부분이다. :nth-child 속성을 쓸 때 아마도 태그들을 다 포함하여 세는 것 같다. position position은 위치 값을 설정해주는 변수이다. position..

margin 과 padding margin 은 바깥 쪽의 여백을 뜻한다. (그림2 의 베이지색과 같음.) 그림 3은 빨간 선으로 사각형이 그어져 있는데 이는 사각형의 원래 크기라는 것이다. 따라서 padding : 10px 은 원래 크기에서 확장시킨 것을 의미한 것이다. 여기서 주의할 것은!! 그림 3에서 내용물을 쓰면 빨간 선 내부에 써지는 것이다. ※ 원래 float : left 를 하면 그 아래에도 속성이 따라 적용되는데, 감싸고 있는 애에게 overflow: hidden 을 주고 안에 들어있는 것들을 float : left 를 하면 그것에만 속성이 적용된다. box-sizing 속성 border 사이즈는 바깥 쪽으로 형성된다. 그러나 border 속성을 주고 그 다음 box-sizing: bord..

CSS3 단위 글자 크기는 px, %, em 단위가 있다. %는 100%가 디폴트.. (100%보다 크면 글자 크기 커진다.) 1em 이 디폴트값 (16px 정도) 2em -> 2배 여기는 간단하게 정리할 부분만 정리하고 넘어가겠다! #content1 p span { display:block; color:#00ff21; font-weight:normal; font-size:50%; } span은 원래 라인 구조지만 dispaly : block 으로 지정하면 아래로 글자가 이동한다. font-size: 50% 는 원래 크기보다 반으로 줄어들게 만드는 속성이다. url() background-image 속성의 속성값으로 많이 사용된다. 이 경우 배경 이미지의 경로를 나타낸다. 해당 이미지는 저작권 보호를 받..

문자 선택자 1. 특정 문자 또는 문자열을 선택하여 CSS 속성을 설정할 수 있다. 설립개요 중소기업 지원업무의 전문성과 효율성을 확보하고 중소기업에 대한 기술, 경영, 인력 등의... 2014 04월 09일 서울 산업진흥원 사명변경.... 2013년 01월 12일 다누리 시민청 개관... ※ 참고로 첫 문자에 태그를 사용해 속성을 지정해서 글자를 키울 수도 있으나, 그렇게 하면 html 문서의 가독성이 떨어지거나 번잡해보일 수 있으므로 CSS 에서 작업을 해주는 것이 좋다. 2. 드래그되어 있는 문자들의 속성을 설정할 수 있다. ::selection 선택이 되어쓸때 적용되는 속성 위의 코드에다가 ... #content p:first-child::selection{ background-color:yell..

반응 선택자 마우스의 반응에 따른 속성을 설정할 수 있다. menu1 menu2 menu3 menu4 menu5 ul > li 는 자손 선택자를 지칭하는데 여기서는 li 모두 다 해당된다. style sheet 에서 li:hover 를 써주어 마우스를 갖다대면 글씨 색이 파란색으로 바뀌는 설정을 해주었다. ( hover가 반응 선택자 ) 상태 선택자 상태에 따라서 CSS 속성이 변하는 설정을 할 수 있다. 상태 선택자는 :(콜론)으로 표시한다. 이름 : 아이디 : 비밀번호 : margin 은 바깥 여백을 조정한다. ( padding은 안쪽 여백 ) 시계방향대로 여백을 조정할 수도 있다. margin : 30px; -> 상하좌우 모두 30px 여백을 준다. margin : 0 auto; -> 상 0, 우 ..

body 부분 header menu1 menu2 menu3 menu4 menu5 footer 시멘틱 태그로 하지 않고 div 태그로 모두 만들어주었다. div id 가 wrap 인 부분은 menu와 side_banner 를 감싸고 있는 형태이다. style 부분 id 는 #, class는 . div는 원래 블록 형태인데 float : left 값을 줘버리면 왼쪽으로 붙음 content 다음에 side_banner 가 아래로 정렬되어야 하는데 왼쪽으로 붙는 걸 볼 수 있음 (단, 공간이 있을때!) float : left 값을 주려면 감싸고 있는 애 wrap 에다가 overflow : hidden 을 써주어야 한다. 간혹 아래 태그 스타일에 clear : both 를 써줄 때가 있는데, clear : bot..