Hello_coding

🚀 inline vs block inline block 컨텐츠 부분만큼만 영역을 차지한다. 한줄을 모두 차지한다. 높이와 너비가 조절이 불가능하다. (css로 적용안됨) 높이,너비 모두 조정 가능하다. padding , border 속성 사용 o / margin 좌우만 가능하다. padding , border , margin 모두 사용가능하며 해당 속성들이 다른요소를 밀어낸다. Q. 만약 inline요소처럼 가로로 배치되면서 높이와 너비를 설정해주고 싶다면? A. inline-block 사용하자! 🚀 마진 겹침 현상 (margin collapsing) 1. 요소와 요소 사이에 margin-top OR margin-bottom의 공간이 있을경우 더 높은 값의 마진이 적용 See the Pen Untitle..

🚀 CSS 1. RESET CSS reset css 란? 브라우저의 모든 기본적인 스타일 속성들을 완전히 초기화 시키는 것 . Q. 왜 reset 해주어야할까? - 각각 브라우저가 제공하는 요소의 스타일이 모두 다르다! - 하지만 개발자가 구현해야하는 디자인은 동일해야한다! - 그렇기에 초기화를 해준다! 🪱 에릭마이어 Reset CSS - 오래전부터 널리 사용되던 방법 - 2011년도 이후 업데이트 x /* reset.css */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, i..

HTML - Tabular data 🚀 : 테이블 생성시 사용 : 테이블의 제목이나 설명을 의미 / table요소의 첫번째 자식으로 사용해야한다!! 이달의 책 판매량 구분 이름 판매량 HTML 삽입 미리보기할 수 없는 소스 🚀 , , 각각 머리글, 본문, 바닥 글을 의미한다. 테이블의 내용이 많을때 테이블의 구역별로 나누는 요소로 사용한다. 이 요소들은 레이아웃에 영향을 미치진 않으나 css를 통해 디자인 스타일을 지정할 수 있다. 구분 이름 판매량 1 해리포터 100 2 헝거게임 200 3 반지의제왕 300 총 판매량 600 - colspan : 열과 열을 병합한다 (보이는것 : row병합) - rowspan : 행과 행을 병합한다 (보이는것 : col병합) HTML 삽입 미리보기할 수 없는 소스 🚀 ..

🚀 Form태그 - 이전글에서 간단한 form의 동작원리를 보았다면 이 글에선 태그를 살펴보자. 🥲 의 속성 - action : 입력 값을 전송할 페이지 - method : 폼의 데이터를 전송할 방법 , get과 post가 있다. 🥲 get vs post? get post 데이터가 어디실리는가 http 헤더에 데이터가 드러난다. http 바디에 데이터를 실어 보내기 때문에 데이터가 외적으로 드러나지 않는다. 데이터의 양 서버에 자원을 위한 키워드를 보내거나 경로와 관련된 정보를 전송한다. 서버에서 작업하는데 필요한 데이터를 보내줘야한다. 멱등성 보장 (자원의 요청이므로 서버에 영향을 받지 않는다.) 보장X (데이터를 서버에 전송해서 특정 작업을 처리하는것이기 때문에 결과가 요청마다 달라질수 있다.) 🥲 ..

🚀 Text-level semantics 🪢 : 줄바꿈 🪢 : 텍스트박스가 한 줄로 모두 표시가 안될 경우 줄바꿈 🪢 : 링크를 만들때 사용 *button과 같이 사용자와 인터렉션이 가능한 요소를 자식으로 두지 않음 🪢 : 현재 문맥에서 정의하고 있는 용어를 나타냄 ex) WWW WWW는 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. - 위키백과 HTML 삽입 미리보기할 수 없는 소스 🪢 : 준말,약자를 나타낼때 사용 -보통은 홀로 쓰이고 dfn 태그로 감싸주기도 한다. WWW HTML 삽입 미리보기할 수 없는 소스 🪢 : 윗첨자,아랫첨자 H20 x2=4 HTML 삽입 미리보기할 수 없는 소스 🪢 : 묶는 용도 (의미 x) *div와 마찬가지고 최후수단으..

🚀 URL, IP, PORT 정리 url? 어느 사이트에 접속하기 위해서 입력해야 하는 주소를 포함한 일련의 문자 (이름과 같음) ip? 송신 호스트와 수신 호스트가 패킷교환 네트워크에서 정보를 주고받는 데 사용하는 정보의 규약이며, osi 네트워크 계층에서 호스트의 주소지정과 패킷 분할 및 조립 기능을 담당 (주소와 같음) port? 직역하면 '항구' 라는 뜻으로 인터넷 프로토콜 스위트에서 포트는 운영 체제 통신의 종단점이다. (문과 같음) ex) www.naver.com 도메인,url 이름 223.130.195.95 ip 주소 22 , 80 , 3000 등등.. Port 문 🚀 HTML Living Standard란? HTML 문법 등을 규정한 표준이다. 비공식적으로 HTML5라고 불린다. HTML과..

🚀html 태그들 크게 html문서는 아래로 구성 🚀태그 종류 : 웹문서가 어떤 버전의 HTML 언어로 작성되었는지 결정하는 기능 : html 파일의 인코딩을 알려주는 태그 (한글,특수문자가 깨지지 않게) : 웹페이지 제목 : 내용을 구분하는데 사용 : div와 같은 역할 : 제목태그 (숫자가 작을수록 글씨가 커짐) : paragraph의 약자, 하나의 문단을 만들때 사용 🚀css 태그들 - 타입선택자, 클래스선택자 구별하기 (타입은 그냥, 클래스선택자는 . 을 찍고 사용) - paddin / margin / border 중요! - float를 사용할 경우 다른요소와 겹치지 않기위해 반드시 div로 묶어준다! - 묶은 div 태그 속성에 overflow : hidden; 적용! - box-shadow (..

종류 설명 작성 예 전체 선택자 문서의 모든 요소에 스타일 적용 * { margin : 0 ; } 타입 선택자 특정 태그를 사용한 모든 요소에서 스타일 적용 p { font-size : 12px; } 클래스 선택자 특정 부분만 선택해서 문서 안에 여러번 적용한다. 마침표( . )를 붙여 사용한다. .bg { backgroud-color : #ddd } id 선택자 특정 부분만 선택해서 문서 안에 한번만 적용한다. #를 붙여 사용한다. #container { width : 500 px ; } 그룹선택자 여러 요소에 같은 스타일을 적용할 때 사용한다. h1,h2 { text-align : center ; }

폼에서 사용하는 태그 폼의 시작과 끝을 만듬 폼 요소를 그룹으로 묶음 필드셋에 제목을 붙임 사용자가 내용을 입력할 필드를 삽입 , 드롭다운 목록을 삽입 택스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입 데이터 목록을 삽입 태그의 유형(type) text 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣음 password 비밀번호를 입력할 수 있는 필드를 넣음 search 검색할 때 입력하는 필드를 넣음 url url 주소를 입력 할 수 있는 필드를 넣음 tel 전화번호를 입력할 수 있는 필드를 넣음 checkbox 여러항목에서 2개 이상 선택할 수 있는 체크 박스를 넣음 radio 여러항목에서 1개만 선택할 수 있는 라디오 버튼을 넣음 number 숫자를 조절할 수 있는 스핀 박스를 넣음 ran..

텍스트 관련 태그 제목. ~까지 사용할 수 있으며 숫자가 커질수록 글자 크기는 작아짐 텍스트 단락. 내용이 길면 엡 브라우저 창의 너비에 맞게 자동으로 줄 바꿈. 줄바꿈 텍스트 단락 중 원하는 위치에서 줄 바꿈 내용인용. 다른 내용보다 들여 쓰고 단락으로 표시 중요하지는 않지만 굵게 표시 중요한 텍스트를 기울게 표시 중요하지는 않지만 기울게 표시(마음속 생각,용어 등..) 내용을 편집할 때 추가한 내용 표시 내용을 편집할 때 삭제한 내용 표시 / 위 첨자/ 아래첨자 목록 관련 태그 순서 있는 목록의 시작과 끝 순서 없는 목록의 시작과 끝 순서 있는 목록이나 순서 없는 목록의 각 항목을 나타냄 설명 목록의 시작과 끝 설명 목록의 이름(제목) 설명 목록의 값(설명) 표 관련 태그 표를 나타냄 표의 제목을 넣..