Reload0213 devNote

※ position : 웹 문서 안의 요소들을 배치해주는 속성 웹 문서를 만들 때 배치와 관련해서 중요하게 사용되는 속성position으로 쓸 수 있는 값으로는 static, relative, absolute, fixed가 있다. ● static => 요소를 단순히 위에서 아래로 흐름에 맞춰 배치할 경우 사용하는 속성. 기본적으로 position을 선언하지 않았을 시 default 값이 static이다. 인라인은 좌에서 우로 블록태그는 위에서 아래로 배치 되는 정적인 배치를 할 경우 static을 통해 배치가 가능하다. ● relative => static일 시 배치된 위치를 기준으로 상대적인 이동을 할 경우 사용되는 속성. 안쪽의 블럭들의 자유로운 이동을 위해 static 속성을 없애기 위한 용도로 사..

개발자 도구를 열어보면 이렇게 margin , border , padding , content의 각각의 영역을 확인 할 수 있다. box-sizing 속성은 2가지가 있는데 content-box , border-box 두 가지가 있으며 이 중 default값은 cotent-box 이다. content-box는 기본 content만 지정하는 것을 말하고, border-box는 박스 사이즈를 결정할 때 border , padding, content 3가지를 합쳐서 포함하는 것을 말한다. 아래의 코드 예시와 결과 값을 비교해보자. ※ 실행결과 및 box-sizing 주의 할 점 및 용도 같은 크기의 너비와 높이로 코드를 작성했지만 content-box는 그 너비와 높이에 border , padding, con..

font-family: family-name: 사용할 폰트의 이름을 나타냄​ - ''로 구분하여 여러 개 선언할 수 가능 - family-name-지정순서로 폰트의 우선순위 결정 - 먼저 선언된 순서대로 우선순위가 결정 - 공백이 있거나, 한글일 경우 작은 따옴표로 묶어서 선언 line height: 행간 조정 -line-height로 제어되는 부분=line-box (em 박스+상하단의 여백) = 속성 = -normal: 기본 값 -number: 줄 간격 단위가 없는 숫자만 입력 폰트사이즈에 따라 배율로 적용 -length: px,em 등 고정값 -number: 자식 요소의 줄 높이는 부모요소의 number(비율)을 상속 받아 자식 요소는 글자 크기에 비례해서 높이가 조정된다 -%: 부모 요소에서 %가 ..

# VSCode 단축키 알아보기 유용한 단축키 모음 "★" 표시는 개인적 추천 단축키 -주석 달기 - 한 줄(Line) 주석하기 Ctrl+ / ★★★ 처음 인강을 들으며 따라 작성하다 처음 알게 됬고, 자주 사용하는 단축기 : 한 줄에도 적용가능하지만 여러 줄에도 사용이 가능합니다. (블록이 아닌 한줄 주석이 여러 줄에 적용됨) - 멀티라인 주석 토글하기 Shift+ Alt+ A - 현재 줄 선택하기 Ctrl+ I 또는 Shift+ 방향키 - 검색 및 찾기 - 원하는 텍스트 찾기 Ctrl+ F ★ - 원하는 텍스트 바꾸기 Ctrl+ R - 파일 찾기 Ctrl+ P ★ - 줄 또는 블럭 이동, 복사 - 라인 또는 멀티라인 삭제 Ctrl+ Shift+ K - 라인 위 또는 아래로 이동 Alt+ 방향키 ★ -..

form의 input태그의 속성중 radio 중복선택 문제 해결 ● radio : 라디오 버튼을 제공하는 type. 이 타입은 복수개의 input이 반드시 존재하며 checkbox와 많은 부분이 동일하지만 차이점이 있다면 체크박스는 값을 복수개를 선택하여 보낼 수 있는 반면 radio 버튼은 단수 개만 가능하다. 라디오1 라디오2 라디오3 해결방법 위 문제는 각각 radio 버튼의 라디오 버튼들이 묶여 있지않고 각각의 다른 영역으로 인식되기 때문이다. 이를 묶기 위해서는 name을 통일하여 선언한다. 라디오1 라디오2 라디오3 각각의 input 타입의 name값을 "ra"로 통일해주니 아래와 같이 해결됨.

Form : 데이터를 전송하기 위한 인터페이스를 태그 형식으로 제공해주는 기능들의 영역 - form 태그 안에 input 태그들이 있는 형태가 가장 기본적인 형식 - 로그인, 회원가입, 검색 등 사람들이 데이터를 입력해서 색인, 수정, 삭제, 생성을 할 수 있는 인터페이스를 제공할 때 사용한다. ※ Form 태그에는 여러가지 속성이 있으며 주요 속성은 다음과 같다. ● name : 폼의 이름을 지정한다. DOM(Document Object Model)에서 form을 접근할 떄 한 페이지 내 다수의 폼을 구분하기 위한 용도로 사용 ● action : 이동하고자 하는 url 경로 혹은 html 파일 경로를 표시할 때 사용(a태그의 href와 동일) ● target : 이동하고자 하는 페이지를 어디에서 열 것..

1. HTTP 란? Hyper Text Transfer Protocol Hyper Text - 문서와 문서가 연결되도록 하는 태그로 구성된 언어 Transfer - 전송한다 Protocol - 어떻게 HTML파일을 주고 받을지에 대한 약속! 2. HTTP의 특징 Request 요청 Response 응답 요청 : 구글에 맛있는 사진 보여달라고 검색 응답 : 맛있는 사진 띄워줄께 요청 : 대화방에 들여보내줘 응답 : 어 들여보내줬어 Stateless 상태가 없다는 뜻 ! 즉 모든 요청이 독립적이라는 것 ex. 요청 1 줌 로그인 응답 1 로그인 200 ok 요청 2 미팅 접속 응답 2 미팅 접속 ok 여기서! 미팅에 접속 하는 건 로그인을 해야 가능하다. 근데 A라는 사람이 이전에 로그인 했다는 사실은 서버..

Anchor 메뉴1 메뉴2 메뉴3 내용1 할수 있다. 내용2 힘내자. 내용3 포기하지말자 페이지에서 페이지 혹은 사이트에서 사이트로 이동 시 사용되는 태그, HTML에서 특정 페이지를 이용할 시에 사용되는 태그로서 HTML의 핵심이 되는 태그이다. a태그 안쪽에는 일반 글이 들어갈 수도 있지만, 그림 혹은 html 태그 단위가 올 수도 있다. 해당 내용을 클릭 시 href 속성에 지정된 url 주소 혹은 경로에 있는 html 페이지로 이동된다. Anchor를 활용한 페이지 이동하기 * html5에서 정식으로 제공되는 기능 중 하나 * 태그에서 id 속성을 통해 선언된 내용을 이용해 anchor 태그에서 해당 id값이 있는 태그로 이동하도록 할수 있는 기능이 생김. *anchor 태그 속성의 href에 "..

가족을 비롯한 여러 주변사람들의 만류에도 불구하고 우여곡절 끝에 시작할수 있게 되었다. 겨우 원룸을 얻어 짐정리 및 전입신고, 각종 지원금 신청부터 할게 산더미이지만, 듣던대로 국비교육 학원의 진도가 너무 빨라서 그나마 조금이나마 미리 보고 온 부분들이 훅훅 읽혀나가서 예습하지 못한 부분이 오면 잘따라갈 수 있을 까 걱정이 조금 된다. 정보처리기사 자격증 필기 교재를 주문해놨으니 최대한 해야할 일들을 해치우고서 낯선 장소, 새로운 공부, 새로운 환경 및 생활에 적응을 최우선 적으로 하고 얼른 책이 오는대로 빠듯하게라도 진도 소화 하며 공부해봐야겠다. 힘내보자

0817 개발환경 조성 및 설치 후 Html 기본적 문법 탐구 메모해두고픈 태그 및 내용들 html의 시작 부분을 알리는 태그이자 현재 문서가 html5로 작성되었음을 브라우저에게 알리는 태그 줄바꿈을 지원하는 태그, 문장 내에 br태그가 있다면 태그 아래로 줄바뀌어 출력된다. 몇 안되는 싱글 태그 중 하나. 페이지와 페이지의 이동을 도와주는 태그 URL 주소를 통해 페이지의 이동을 태그로 구현한다. 내부의 인접한 html 페이지의 이동도 가능하며, 페이지 내에서의 위치 이동도 가능하게 만들어주는 태그(html(Hypertext Markup Language)의 정체성이라 할수 있는 태그) 인라인 영역을 지정하는 태그. 태그 자체는 아무런 기능을 지원하지는 않는다. 하지만 css와의 결합력이 좋아 문장의 ..