hojncode 웹개발 공부하기.

https://developer.mozilla.org/ko/docs/Web/CSS/General_sibling_combinator 일반 형제 결합자 - CSS: Cascading Style Sheets | MDN 일반 형제 결합자(~)는 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택합니다. 두 요소가 서로 붙어있 developer.mozilla.org 일반 형제 결합자(~)는 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택합니다. 두 요소가 서로 붙어있을 필요는 없습니다. p ~ span { color: red; } 이건 빨강이 ..

이전 페이지로 이동하기

1. position: static (default) 2. position: fixed - element가 처음 생성된 자리에 고정. 3. position: relative; - element가 '처음 생성된 위치'를 기준점으로, top bottom left right으로 위치를 조금씩 수정할 수 있다. 4. position: absolute; 가장 가까운 relative 부모를 기준으로 이동 position:relative; 를 해주면 부모가 된다. 없으면 body를 기준으로 함.

Block은 옆에 다른 요소가 올 수 없는 종류를 뜻하고, Inline은 옆에 다른 요소가 올 수 있는 종류이다. Inline은 span, link, image 같은 종류가 있고, 그 외에는 거의 block으로 존재한다고 볼 수 있다.

문서를 보기만 해도 그 의미를 짐작할 수 있는 태그 작성법. 태그만 사용하지 말고 , 작성 의도에 맞는 태그로 사용하자. semantic tag? 문단 짧은 텍스트 박스 : 기본적으로 상하로 배치 시킨다. 코드를 개발자가 알아보기 쉽도록 semantic 태그로 작성하자 © html & css 공부하기

link태그는 파일을 연결해주고, a태그는 하이퍼링크로 페이지를 연결해준다.

top: a; right, left: b; bottom: c;

head 태그에는 invisible 정보들이 들어가며 : 메타데이터 ex) 인코딩정보, og:title, og:image, 등등... body 태그에는 visible한 콘텐츠 정보들이 들어간다 : 실제로 웹페이지에 보이는 콘텐츠들에 대한 정보들 -a 태그 사용 팁- naver target : 기본값은 self이고, _blank 입력 시 새 탭에서 링크가 열림 attributes : 태그 내부에 입력하는 값 들을 뜻함

top, bottom , left, right 를 축약해서 사용 가능하다. top: 20px; right: 50px; bottom: 20px; left: 50px; 를 inset : 20px 50px; 이렇게 사용할 수 있다.

HTML = Markup language , (markup = content) html은 browser에게 웹사이트에 어떤 content가 있는지를 알려준다. (title, link, image,paragraph,date...) CSS는 디자인과 스타일을 위한 언어. browse에게 content들이 어떻게 보여야 하는지를 알려준다. JavaScript는 웹사이트를 동적으로 만들어준다. (클릭시 이동, 클릭시 화면에 창 띄우기...) -JS만 프로그래밍 언어이다.