일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- SQL
- HTML
- for반복문
- 서브쿼리
- 나혼자코딩
- 코드잇
- 코드잇TIL
- 코드잇 TIL
- 결정트리
- Seaborn
- matplotlib
- 로지스틱회귀
- 오늘도코드잇
- 머신러닝
- 경사하강법
- 파이썬
- 데이터분석
- 선형회귀
- 메소드
- sql연습문제
- 코딩공부
- numpy
- 행렬
- 판다스
- pandas
- 코딩
- 코딩독학
- CSS
- 다항회귀
- 윈도우함수
- Today
- Total
목록HTML (19)
Coding Diary.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/CG4sZ/btst89O7IH5/lJsc5XGDzvcandYE4XGD20/img.png)
1. Position 속성 글의 흐름에서 벗어나서 요소들을 자유롭게 배치할 때 쓰는 속성입니다. position에 따라서 위치를 정하는 기준이 달라집니다. 기본 값은 static이고 static인 경우 원래 있어야 할 위치에 배치됩니다. 2. 위치 정하기 위치를 정하는 기준에 대해서 top, right, bottom, left 속성으로 위치를 정할 수 있습니다. 값이 모두 똑같은 경우 inset 속성을 씁니다. 3. relative 포지션 요소의 원래 위치를 기준으로 배치합니다. 이때 요소의 원래 자리는 그대로 차지하고 있습니다. .green { position: relative; top: 15px; left: 10px; } 4. absolute 포지션 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/oPkVt/btsts0yIctB/GtcKfW1jh2IgwJ548zuyb0/img.png)
1. link 태그 외부에 있는 것을 불러올 때 사용하는 태그입니다. 어떤 목적인지를 rel 속성에 적습니다. 위치는 href로 지정하면 됩니다. 주로 사이트 아이콘을 불러올 때는 rel="icon"라고 씁니다. 2. 를 꼭 써주어야 합니다. ... 3. 4. 시맨틱 태그 와 기능은 똑같지만 의미가 담겨있는 태그들을 시맨틱 태그라고 합니다. 사용법이 있는것은 아니고 작성하는 사람의 의도가 중요합니다. 시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEQ)나 접근성(Accessibility)를 높이는데 도움이 됩니다. 태그 이름 용도 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부 사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b14s0J/btstw4AC9Z1/nVK23wMuk8l6s7jH9AuA00/img.png)
1. 기본적인 폼의 형태 아이디 비밀번호 로그인 2. 라벨 태그로 을 감싸면 라벨을 클릭했을 때 인풋에 포커싱이 됩니다. 아이디 라벨의 for 속성과 인풋의 id 속성을 일치시키면 클릭했을 때 인풋에 포커싱이 됩니다. 아이디 3. 인풋 name 속성은 폼을 전송했을 때 입력한 값에 매칭되는 이름입니다. 아래 코드에서는 인풋에 입력한 값이 username이라는 이름에 매칭됩니다. 아이디 type 속성을 사용하면 다양한 인풋을 사용할 수 있습니다. 대표적으로 입력한 값을 가려주고 싶을 때는 type="password"를 사용합니다. 비밀번호
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nnnpL/btstC0DDxY8/KQQgYkt9dX5xteRct5te9K/img.png)
1. 값이 비어있을 때 보여주는 값 placeholder 아래의 예시와 같은 구글 로그인 화면에 있는 "이메일 또는 휴대전화" 같은 것을 "플레이스 홀더"라고 부릅니다. 이러한 값을 추가하려면 placeholde라는 속성을 쓰면 됩니다. 이때 placeholder의 디자인을 바꾸려면 CSS 선택자로 ::placeholder를 활용하면 됩니다. input::placeholder { color: #dddddd; } 2. 반드시 입력해야 하는 값 required 폼에서 반드시 입력해야 하는 값이 있다면 required 속성을 써주면 됩니다. 만약 required인 인풋의 값이 비어있다면, 전송 버튼을 눌러도 전송되지 않습니다. 3. 자동완성 autocomplete 예전에 입력한 값들을 보여주는 인풋은 auto..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ey4gUh/btstwmuHJ6f/iMJmEaMo7UoinMcZTPgwU1/img.png)
태그에서 type 속성을 password로 하면 입력한 내용이 가려지는 비밀번호 인풋을 만들 수 있습니다. type에 쓸 수 있는 여러 가지 값들을 알아봅시다. 1. 체크박스 checkbox 1) 한 항목만 선택하는 경우 아래의 예시에서 '동의합니다'에 체크하는 경우 agreement 값이 on이라는 문자열로 지정됩니다. 동의합니다 2) 여러 항목 중에서 몇 항목을 선택하는 경우 태그에 value 속성으로 값을 지정해주면 선택된 항목의 지정된 값이 쓰입니다. 예를 들어 아래의 코드에서 "액션"이랑 "코미디"를 선택했을 때 film의 값으로 action과 comedy라는 문자열이 지정됩니다. 폼을 전송했을 떄 쿼리 문자열에서는 &film=action&film=comedy처럼 전송됩니다. 좋아하는 영화 장르..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bqwQut/btstG7WQWON/kX3FJvZMmUnZ35hjMDC99k/img.png)
1. 이미지 파일 주소는 src 속성으로 지정합니다. 크기는 width와 height 속성으로 단위 없이 지정합니다. (CSS로도 크기를 지정할 수 있습니다.) 이미지에 대한 설명은 alt 라는 속성을 사용합니다. 2. 비디오 파일 주소는 src 속성으로 지정합니다. 크기는 width와 height 속성으로 단위 없이 지정합니다. (CSS로도 크기를 조절할 수 있습니다.) 그 외에 자동 재생을 하는 autoplay 속성, 음소거를 하는 muted, 조작하는 버튼들을 보여누는 controls 속성이 있습니다. 특히 자동 재생은 불쾌감을 줄 수 있기 때문에 크롬 브라우저에서는 반드시 muted와 함께 써야합니다. 3. 오디오 파일 주소는 src 속성으로 지정합니다. 자동 재생을 하는 autoplay, 조작하..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cpIsJ2/btstyuk3LCj/5jTpZVdKAFW4xIKPcQOCO1/img.png)
1. 테이블 정보를 표로 나타낼 때는 태그를 사용합니다. 테이블 행은 (Table Row)태그로 감쌉니다. 각 데이터들은 (Table Data) 태그로 넣습니다. 2. 머리글 표에서 머리글은 태그로 감싸면 됩니다. 행은 태그로 감싸면 됩니다. 각 행 안에 있는 것들은 제목이기 때문에 가 아니라 라는 태그를 넣습니다. 본문에 해당하는 행들은 라는 태그로 감쌉니다. 3. 바닥글 표에서 바닥글은 태그로 감싸면 됩니다. 와 마찬가지로 행은 로 감쌉니다. 제목으로 쓰는 칸은 태그를 넣습니다. Premium Standard Basic 다운로드 무제한 월 30회 불가 ... 화질 최대 FHD HD ₩15,900 ₩10,900 ₩8,900
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/QPPKE/btstG9tB6M4/FCugDKR3312Y19qtEK3JVK/img.png)
1. 순서 리스트(Ordered List) 항목들 사이에 순서가 있는 목록을 작성할 때 이라는 태그를 감싸고, 그 안에 항목은 태그를 씁니다. 상영작 순위 라라랜드 명량 극한직업 국제시장 어벤져스: 엔드게임 2. 순서 없는 리스트 (Unordered List) 항목들 사이세 순서가 없는 목록을 작성할 때 이라는 태그를 감싸고, 그 안에 항목은 태그를 씁니다. 상영작 순위 라라랜드 명량 극한직업 국제시장 어벤져스: 엔드게임 3. 리스트 스타일링 순서 리스트에서는 type 속성으로 기호를 바꿀 수 있습니다. 라라랜드 명량 극한직업 국제시장 어벤져스: 엔드게임 list-style 이라는 CSS 속성으로도 바꿀 수 있습니다. ul { list-style: disc; /*동그라미 */ } 기호를 없애고 싶을 때는..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cBX8KR/btstx7RbGhG/j01Cr4klgVEfy66CnvYgKK/img.png)
1. 제목 태그 ~ 문서의 제목을 나타내는 태그입니다. 한국 영화 한국 영화의 역사 1950년대: 침체기 1960년대: 황금기 1970년대: 쇠퇴기 1980년대: 암흑기 1990년대: 전환점 2000년대: 르네상스 2010년대: 최전성기 2020년대: 대격변 유명한 한국 감독 박찬욱 봉준호 임권택 김기덕 김기영 최동훈 위 HTML 코드에 담겨 있는 정보의 구조를 그려보면 아래와 같습니다. 이런 식으로 문서에서 제목을 나누는 태그 입니다. - 한국 영화 - 한국 영화의 역사 - 1950년대: 침체기 - 1960년대: 황금기 - 1970년대: 쇠퇴기 - 1980년대: 암흑기 - 1990년대: 전환점 - 2000년대: 르네상스 - 2010년대: 최전성기 - 2020년대: 대격변 - 유명한 한국 감독 - 박찬욱..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/vvqGV/btstzlg0579/Yx46845r9ZGcxKSwhrQMuK/img.png)
링크는 보통 해당 주소의 페이지로 연결해 줍니다. '페이지 연결' 외에 다른 동작들도 가능합니다. https://나 http://대신에 다른 내용을 넣으면 되는데, 이런 약속들을 URI 스킴(URI Scheme)이라고 부릅니다. 1. 이메일 보내기 mailto: 라는 걸 사용하면 이메일을 보낼 수 있습니다. 이 링크를 클릭하면 이메일 프로그램이나 이메일 앱을 열 수 있고, 받는 사람 주소에 링크에 적힌 이메일 주소를 자동으로 입력해 줍니다. 메일 보내기 2. 전화 걸기 tel:를 사용하면 전화를 걸 수 있습니다. 데스크톱 컴퓨터에서는 전화 기능이 없을 수 있지만, 스마트폰에서 이 링크를 클릭하면 전화 앱으로 연결됩니다. 전화 걸기