전체 글 278

CSS - overflow hidden, flow , gradient 속성

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

CSS - 수직 가운데 정렬, position 속성

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..

CSS - magin과 padding, box-sizing, background-image

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

CSS - 단위, url(), display 속성

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 속성의 속성값으로 많이 사용된다. 이 경우 배경 이미지의 경로를 나타낸다. 해당 이미지는 저작권 보호를 받..

CSS - 문자 선택자, 링크 선택자, 부정 선택자

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

CSS - 반응 선택자, 상태 선택자, 구조 선택자

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

CSS - tag, id, class 선택자, 속성 선택자, 후손 및 자손 선택자 등

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..

HTML 비디오 태그, 폼 태그, 시멘틱 태그

비디오 태그 동영상을 출력하는 태그 폼 태그 회원가입이나 정보를 입력할 때 사용되는 태그이다. 속성은 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 기본 태그

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

git 과 github 개념

앱이나 웹사이트나 게임 등 무언가 만들기 시작하면 파일들이 다 담기는 프로젝트 폴더가 있다. 그 폴더로 이동(cd) 하고 git 을 시작하면.. (혹은 vs code 프로그램에서 crtl + ` 을 눌러서 git 을 시작할 수 있다. 동시에 현재폴더로 이동명령) $ git init -> 지금부터 이 모든 폴더의 수정 내역들이 저장되는 .git 이라는 숨김 폴더가 생긴다. 현재 작업한 폴더를 백업하고 싶다면.. $ git commit -m "(작업수행 내용)" -> "(작업수행 내용)"에 들어가야 할 것은 이러이러한 작업을 수행했다 정도의 코멘트를 달아준다. 그 다음 commit 과정이 일어나고 박제가 된다고 볼 수 있다. 이때 박제를 여러번 했다고 해서 용량이 엄청 커지는 것은 아니고 변경 사항만 기록되..

👩🏻‍💻 TIL 2021.09.16