공부기록용

🔴position 🔻static: position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용되며 HTML 문서 상에서 원래 있어야하는 위치에 배치된다. 🔻relative(부모요소): 요소를 원래 위치에서 벗어나게 배치할 수 있다. 🔻absolute(자식요소): position속성이static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준이 된다. 🔻fixed 🔻sticky position position은 문서 상에 요소를 배치하는 방법을 정의한다. position이 요소의 배치 방법을 결정하면, top/bottom/right/left를 필요에 따라 사용하므로써 최종 위치를 결정하는 방식이다. (~부터 얼만큼) ※오프셋(보충)이란, 위치를 얼마간 이동시키는 것을 의미 static ..

🔴텍스트 관련 속성 🔴블록&인라인 관련 속성 🔻display 🔻border 🔻float & clear 텍스트 관련 속성 font-family *{ Font-family: Times, monospace, serif } 요소를 구성하는 텍스트의 글꼴을 정의한다. 글꼴명을 속성값으로 지정한다. 여러 개의 글꼴을 연달아 기입하여 우선 순위를 지정할 수 있다. ---> Times를 우선 지정하되, 지원되지 않을 경우 monospace를 지정한다. font-size 수치와 단위를 지정해 글자의 크기를 정의할 수 있다. px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기(절대적인 크기이기 때문에 숫자를 딱 지정해서 값을 정해놓으면 어떤 크기로 고정된다) rem : html태그의 font-size에 대응하는..

선택자 어떤 요소에 스타일을 적용 할 것인지에 대한 정보 선택자 { 속성명: 속성값; } 종류 기본 선택자/그룹 선택자/특성 선택자/결합 선택자/의사클래스/의사요소 기본 선택자 전체 선택자(*) * { color: blue; } 모든 요소를 선택한다. *(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호이다. ---> '문서 내 모든 요소의 글자 색을 파란 색으로 지정한다'는 의미 태그 선택자(유형 선택자) P { color: blue; } 주어진 이름을 가진 요소를 선택한다. 주어진 이름을 가진 요소가 다수일 경우, 해당하는 요소들을 모두 선택한다. ---> '문서 내 모든 p태그 요소의 글자 색을 파란 색으로 지정한다'는 의미 클래스 선택자( . = 나는 class를 고르겠다) .text { ..

CSS(Cascading Style Sheets) 계단식으로 스타일을 정의하는 문서 CSS는 웹문서를 꾸며주기 위해 사용하는 언어이다. CSS코드(문서)는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는것이므로 HTML 문서가 없다면 의미가 없다. (HTML문서와 함께 사용되지 않는 CSS문서는 단순한 텍스트에 불과하며, 웹브라우저를 통해 결과물을 확인하기 위해서는 반드시 HTML 문서 작성이 선행되어야 한다.) CSS코드는 CSS파일에 작성한다 -> .css CSS기본문법 선택자{ ㅣ 속성명: 속성값; } 선택자 : 어떤 요소에 스타일을 적용 할지에 대한 정보 { } / 중괄호 : 선택한 요소에 적용할 스타일을 정의하는 영역 속성명 : 어떤 스타일을 정의하고 싶은지에..

서버와 클라이언트 클라이언트(사용자)가 요청을 하면, 서버는 그에 대한 응답으로 정보를 제공한다. Ex 1. ->클라이언트(사용자) : 네이버주소 입력 - 네이버 홈페이지를 보고싶습니다. - Enter(요청) ->서버(네이버) : 알겠습니다. - 저희 네이버 홈페이지의 html문서를 보내드리니, 보세요 - (네이버 웹페이지를 보냄_응답) ->클라이언트(사용자) : 제 웹브라우저에 네이버 홈페이지가 오픈되었습니다. 감사합니다. Ex 2. GET 서버에 요청을 보내어 응답을 받아낸다.(서버로부터 정보를 가져오겠다!) POST 서버에 요청을 보내서 작업을 수행한다.(서버에 있는 정보를 추가, 수정, 삭제를 한 후에 응답을 받아낸다.) 서버의 정보를 조작하겠다는 성격의 요청 데이터 전송(Form) 양식을 만들어..

링크(anchor) 링크란, 현재의 문서에서 다른 문서로 이동할 수 있는 수단이다. 기본구조 a태그 요소는 href속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외 다른 url로 연결할 수 있는 링크(연결)을 만든다. 인라인 요소이며, 콘텐츠(내용)은 주로 링크의 목적지를 나타낸다. target 속성 추가 ---> 현재 탭에서 열기 ---> 새로운 탭에서 열기 a태그의 target 속성을 이용하면 새로운 문서를 열 때 현재 탭에서 열지, 새로운 탭에서 열지 결정할 수 있다. (따로 지정을 안하면 기존의 창에서 열림) ▶내용실습◀ ---> 네이버로 이동(기존의 창에서) 네이버로 갑시다! ---> 이미지 클릭시 구글로 이동 ---> 기존의 창에서 다음으로 이동 다음으로 갑시다 ---> 새로운 창으로..