JH 개발 블로그

문자 선택자 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..

비디오 태그 동영상을 출력하는 태그 폼 태그 회원가입이나 정보를 입력할 때 사용되는 태그이다. 속성은 action 과 method 가 존재한다. action : 정보들을 입력하고 전송할 때, 그것들을 받을 주소(서버쪽의 주소)를 입력하는 곳이다. 서버는 여기서 입력된 정보들을 데이터베이스화하는 일 등을 한다! method : 정보가 가는 방식을 결정하는 속성이다. 속성값은 get, post 가 존재한다. ↓ get 속성값은 우리가 네이버 검색창에 "오늘의 날씨" 라고 치면 https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=%EC%98%A4%EB%8A%98%EC%9D%98+%EB%82%A0%EC%94%A8 ..

태그 HTML 문서를 구성하고 있는 요소이다. 그리고 태그에는 이름과 속성이 있다. 앞으로 태그에 대해서 학습할 것이다. 개행해주는 태그 다른 태그는 시작 태그와 종료 태그가 있지만 br 태그는 시작 태그와 종료 태그가 하나에 다 들어있다. 이라고 써줘도 되지만 원칙은 와 같이 끝에 슬러시를 써주는 것 ... 제목 같은 곳에 사용하는 태그 개행 태그를 따로 넣지 않아도 개행이 된다. ~ 까지 존재한다. ... 주로 본문에 사용하는 태그 중간에 개행하고 싶으면 br 태그를 넣으면 된다. .. 이태릭채 -> 글씨가 기울어진다. ... 위에 조그맣게 표시된다. ... 아래에 언더바가 표시된다. ... 줄 그음 h1 태그입니다. h2 태그입니다. h3 태그입니다. h4 태그입니다. h5 태그입니다. h6 태그입..

flexbox란? flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다. flexbox의 구성 flexbox는 복수의 자식들 요소인 item과 그 상위 부모 요소인 container로 구성된다. flexbox를 만드는 방법은 간단하다. 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언..

display: inline-block; display: block; display: inline; 이것들에 대해 알아보기 전에 먼저 간단한 예제를 보자. 안녕하세요 저는 친절한 소나무입니다 출력 결과 안녕하세요 저는 친절한 소나무입니다 태그 뒤에 줄바꿈이 일어나고 태그 뒤에는 줄바꿈이 일어나지 않는 것이 보일 것입니다. 왜 이런 현상이 발생할까요? 두 태그에 border값을 주면 확인할 수 있습니다. display: block; 태그는 block 요소입니다. block요소는 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. block이니까 기다란 블럭이라고 생각하면 외우기 쉽겠죠? p 태그, h 태그#, li 태그 를 한번 떠올려 보세요! 보통 ..