본문 바로가기

Web App/HTML, CSS4

[CSS] 배치, 레이아웃 설계, float 5. Element가 배치되는 방법(CSS layout) Layout = 엘리먼트를 화면에 배치하는 것 = Rendering 과정 = 배치 display(block, inline, inline-block) block : 위에서 아래로, inline : 좌에서 우로 흐른다. position(static, absolute, relative, fixed) float(left, right) 블록으로 쌓이는 엘리먼트 display: block ​ div, p 등 대부분 엘리먼트 옆으로 흐르는 엘리먼트 display: inline ​ span, a(링크), strong(강조) 좀 다르게 배치시키기 (position 속성) static position 속성은 기본 static이다. 그냥 순서대로 배치된다. absol.. 2019. 10. 5.
[CSS] 기초 1. CSS CSS선언 방식 style을 HTML에 적용하는 방법 inline : html 태그 안에다가 삽입, 같은 속성을 추가하려 할 때 다른 방법보다 우선 적용된다. inline이 가장 먼저 반응한다! internal : style 태그로 지정하기. head안에 바로 넣는다. 별도의 css파일을 관리하지 않아도 된다. 브라우저가 요청을 보내지 않는다. 구조와 스타일이 섞여있어서, 유지, 보수, 관리가 어렵다. external : 외부파일(.css)로 지정하기. main.css internal과 external은 우선순위가 동등하다. 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다. selector(선택자) property value { }는 오브젝트를 표현함. element.stype int.. 2019. 10. 5.
[HTML] 구조설계 3) HTML 구조설계 Company Name Home Home About Map AboutUs Lorem ipsum dolor sit amet, What we do Lorem ipsum dolor sit amet, Contact us Lorem ipsum dolor sit amet, Copyright @codesquad class 객체 : 비슷한 스타일을 함께 표현 하나의 HTML 문서 안에서 중복사용 가능 하나의 태그에 여러개의 다른 class 이름을 공백을 기준으로 나열할 수 있다. 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해, class의 사용이 필수적이다. id : identifier 고유한 하나의 객체, 객체 관리, 고유한 영역을 표시, 검색시 id를 가지고 쉽게 찾을 수 있음, 클래.. 2019. 10. 5.
[HTML] 기초 1. HTML Tags tag 종류 (의미에 맞추어 사용해야 한다.) 링크 이미지 목록 제목 google - html tag list 검색. anchor 태그, img, ul/li, heading, p 태그 등이 자주 이용됨 div 태그는 특별히 block 엘리먼트라고 하고, 일반적인 영역을 표현할 때 가장 많이 사용한다. 2. HTML Layout 태그 레이아웃은 '배치'를 의미하고, HTML 태그로 감싸진 각 정보요소를 화면상의 특정 공간에 위치하도록 결정 상단 header home news sports logout Today's weather luck Hello Here are some fruits. apple banana melon orange [출처 - 부스트코스 웹 프로그래밍] https://.. 2019. 10. 5.