아기개발자 일지/Web Dev. Boostcourse (14) 썸네일형 리스트형 3.6 float 기반 샘플 화면 레이아웃 구성 레이아웃 만들기를 한번 해보겟습니다 ! (https://codepen.io/) 1. 자식이 float인 경우에는 자식으로 생각안해 .. 왜냐면 둥 떠있는 애니까. 이럴때는 overflow라는 속성을 줘서 float를 인식시킬 수 있다. overflow를 주면 자식으로 인식할수 있어 . wrap이 부모니까 , wrap에 overflow : auto; 를 주면 된다. CSS 에서 hight 를 넣으면 left, right 속성 맞출수 있다 . .left , .right { 여기에 속성 넣으면 left, right둘다 적용 가능 } .left{ 이렇게만 설정하면 left 에만 설정 } 3.5 Element가 배치되는 방법 -2 핵심 개념 - 박스모델 - 마진 - 보더 - 패딩 - 포지션 float 에 대해서 알아보자 . float속성은 기본적인 엘리먼트 배치에서 벗어나 특별히 배치됩니다. 조절은 가능한데 예외적으로 둥둥 떠있는 ... 풍선처럼 떠오르는 느낌으로 생각하면 된다. html은 디비전 태그가 있고, 블루,그린,ㄹ레드 . 그린이 빨간색이 아래에 있죠 .. 순서대로 다르게 되어있는데 겹친 부분을 주석으로 처리하고 나서 여러분들에게 어떻게 보이는지 한번 플롯 속성을 없애봅니다 >> float속성으로 지정하니까 서로 엘리먼트 배치들을 겹치게 할 수 있다. float를 써서는 좌우 영역 배치를 많이 합니다 . 하나의 블록 엘리먼트는 박스 형태다. 박스 모델 . 네이버 화명늘 가지고 이해해보면 이 영역 뭘까요 .. 텍스트로 다섯.. 3.4 CSS 기본 스타일 변경하기 글자색, 배경색을 바꿔보자 (CSS없이 html로만) - 고딩때 배운게 기억난다 ... 감사합니다 컴일 쌤,, font 색상변경 color : red; color : rgba(255, 0, 0, 0.5); color : #ff0000; font size 변경 font-size : 16px; font-size : 1em 배경색 background-color : #ff0; background-image, position, repeat 등의 속성이 있습니다. background : #0000ff url(“.../gif”) no-repeat center top; //한 줄로 정의도 가능 글씨체/글꼴 font-family:"Gulim"; font-family : monospace; 3.2 상속과 우선순위 css 상속을 알아보자 상속 : 상위에 적용된 스타일을 하위에도 쓴다. 엘리먼트마다 있는 다양한 속성을 매번 적용해줄수 없기 때문에 부모에 설정해두고 자식도 똑같다고 상속받을 수가 있다. ㄴ내용 이러한 내용이 있을 때, 상위의 style 에서 속성을 정의할 때 body > div { color : green; } 이런식으로 정의하면, body 안의 div 의 속성은 폰트 색깔 녹색으로 정의가 가능하다. 하지만 이 모든것은 다 적용되는 건 아니고, box-model이라고 하는 width, height, margin, padding, border와 같은 배치 속성들은 하위 엘리먼트에 상속되지 않아 효율적으로 적용할 수 있다. CSS는 여러가지 스타일 정보를 기반으로 최종적으로 '경쟁'에 의해 적절한 스타일이.. 3.1 CSS css 선언 방식. style을 HTML페이지에 적용하는 방법 1. inline (우선순위 1순위!) HTML 태그 안에다가 적용한다, 이는 다른 CSS 파일에 적용한 것보다 가장 먼저 적용된다. 2. internal (external과 작동 순서는 동등함) Style 태그로 지정. 구조(html의 문법들)와 스타일이 섞이게 되므로, 유지보수가 어려워진다. 하지만 별도의 CSS 파일을 관리하지 않아도 되며, 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다. 3. external 외부파일로 저장하는 방식. 가급적 이 방법으로 구현하는 것이 좋습니다. 현업에서 여러개의 CSS파일로 분리하고 이를 합쳐서 서비스에 사용하기도 합니다. 아래 코드처럼 link태그로 추가해서 CSS파일 불.. 2.3 HTML 구조설계 HTML 구조와 설계에 대해서. html스트럭처 디자인 .. 이러한 구조를 html 문서 레이아웃이라고 하고, 이 큰 구조안에서도 세부 구조를 이쁘게 짜야 한다. 로렘 입숨 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.. 2.2 HTML Layout Tag 레이아웃이란 ? html 화면을 구성하는 기본적인 모습 header(상단) section nav footer (하단) aside 영역들은 다 의미를 가지고 있습니다. footer대신에 div를 써도 되는데, footer라는 부분을 인식하는 브라우저가 없었어서 보통 데스크탑에서 쓰지 못하고, 최신 브라우저가 많은 모바일버전부터 fotter를 쓰고 있다. DOM구조 포인터로 찍으면서 각 태그들이 화면 어디 영역에 위치하는지 확인이 가능하다. 대부분 pc유저는 div에다가 클래스로 header, footer 라고 적용해서 많이 하고, html5의 태그인 header, footer 태그를 수용하는 모바일기기에서는 header,footer 를 많이 쓴다. 2.1 HTML Tags 태그의 종류는 시멘틱하다. 링크 이미지 목록 제목 참고 : w3schools.com 에서 html태그의 종류를 알아볼 수 있다. 스타일 관련 태그들은 왠만하면 html5에서 쓰이지 않고,css에서 쓰인다. ul 이전 1 2 다음
