전체 글 (41) 썸네일형 리스트형 a 태그 - anchor의 첫 글자 - HTML의 약자 HyperText Markup Language에서 HyperText가 이 a 태그를 의미 - 링크 태그 → 로 감싸진 Hypertext Markup Language (HTML)을 클릭하면 기입한 주소로 링크된다. +) → href - HyperText Reference의 약자 → target="_blank" - 링크를 클릭했을 때 새 창에서 페이지가 열리게 하는 속성 → title - 이 링크가 어떤 내용을 담고 있는지를 툴팁으로 보여주는 속성 문서의 구조 ex) WEB1 - html - 제목 지정 태그 - 검색엔진이 웹 페이지를 분석할 때 가장 중요하게 생각하는 태그 - 웹 브라우저에게 이 웹 페이지가 UTF-8로 만들어졌다는 것을 알린다. (한글이 깨지지 않게 된다.) , - 본문은 body 태그를 이용해 감싸고, 본문을 설명하는 태그는 head 태그로 감싼다. - 코드를 크게 본문(body)과 본문을 설명하는 부분(head)으로 나눈 것이다. - body 태그와 head 태그를 크게 감싸는 태그 - 이 웹 페이지가 HTML로서 만들어졌다는 것을 알리기 위해 문서의 시작에 를 추가 → 정리해보면, 이런 형식인 것이다. HTML CSS JavaScript HTML 본문 Tag - 강조 표시 - underline으로 연상 - 밑줄 긋기 ~ - heading - 제목 태그 - 줄 바꾸기 - 닫는 태그 X (무언가를 설명하지 않는 태그들은 감싸야하는 내용이 없기 때문에 닫는 태그 필요 X) cf) 닫지 않는 태그의 예 , , , , - paragraph로 연상 +) p태그의 단점: 단락과 단락의 간격이 고정 → CSS 통해 해결 p 태그를 통해 단락의 경계를 분명히 하면서 CSS를 통해 p 태그의 디자인을 자유롭게 변경할 수 있기 때문에 br 태그보다 p 태그가 더 좋은 선택이다. - image로 연상 1) 인터넷 주소를 기입해 인터넷에 있는 이미지 삽입 ex) 2) 웹 페이지 파일과 같은 위치에 있는 이미지 파일은 src 속성값에 이미지 파일의 이름을 적어준다. ex) +) wi.. 코드의 재사용 ex) 웹 페이지의 모든 a 태그에 대해 동일한 수정사항이 생겼는데 그 a 태그가 만약 1억 개라면,,, - 이 예제에서 CSS 코드가 모든 웹 페이지에서 동일하게 중복으로 등장 → (1) 새로운 css 파일을 만들어 style 태그의 내용을 저장 (2) 모든 웹 페이지의 style 태그 부분을 제거하고 그 자리에 를 기입 (3) 이제 모든 페이지에서 중복되던 부분을 한 줄의 간단한 링크로 style.css 부분의 내용과 연결 → style.css 파일의 내용을 수정하면 수많은 웹 페이지들에 자동으로 적용 반응형 디자인과 미디어 쿼리 - 반응형 웹(responsive web): 화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해 최적화된 모양으로 바뀌는 것 - 미디어 쿼리: CSS를 통해 반응형 웹을 구현하는 핵심적인 개념 →목표: 미디어 쿼리를 통해 웹의 가로 사이즈가 특정 수준 이상이거나 이하면 태그가 보이지 않게 만드는 것 -우선 responsive라는 단어를 쓴 div 태그 생성 -div 태그 박스 설정 (border값:10px, 초록색 실선, 폰트 크기:60px) -@media(min-width:800px) { div { display:none; } } → min-width(최소 폭)이 800px을 만족할 때 중괄호 안의 내용(=display:none;) 실행 →즉, 폭이 800px을 넘으면 display:none; 실행(.. 그리드 -div: 아무런 의미가 없고, 디자인의 용도로만 사용하는 태그 -block level element(화면 전체 사용) -span: div와 같이 아무런 의미가 없고, 디자인의 용도로만 사용하는 태그 -inline element(자신의 크기만큼만 공간 차지) → 둘의 차이는 block level element vs inline element → 두 개의 태그를 나란히 배치하는 등의 특정한 배치를 하고 싶으면, 그것을 감싸는 부모 태그가 필요하다. 이 예시에서는 디자인의 목적만으로 라는 부모 태그를 만든 것이다. → display:grid; //부모 태그 grid의 display값을 grid로 지정. → grid-template-columns 150px 1fr; //NAVIGATION과 ARTICLE을 두.. 박스 모델 1) Block level element: 화면 전체 차지 ex) h1 태그 2) Inline element: 자신의 크기만큼 공간 차지 ex) a 태그 +) display block level element를 화면 전체가 아닌 자신의 크기만큼만 사용하도록, 즉 inline element가 되도록 설정 → display:inline; 반대로, inline element도 block level element가 되도록 설정 → display:block; 화면에서 안 보이게 설정 → display:none; → 박스의 안쪽부터 content->padding->border->margin -content -width: content의 폭 설정 -height: content의 높이 설정 -padding: conte.. 선택자의 기본 - 우선순위) tag 이전 1 2 3 4 5 6 다음
