본문 바로가기

코딩공부/WEB2 - CSS

[6] 코드의 재사용 코드의 재사용 하나의 페이지에 적용한 디자인을 다른 페이지에도 동일하게 적용하려고 한다. style 태그를 ctrl+c, ctrl+v 하고, 요소를 감쌌던 id=grid, article 인 div 태그를 모두 적어주면 된다.. 하지만, 페이지가 1억개라면...? css 코드가 모든 웹페이지에서 중복해서 등장하고 있다. 코딩을 잘하는 방법 - "중복의 제거" style 태그 내에 있는 순수한 css 코드 만을 복사해서 style.css 파일을 생성 기존의 style 태그 삭제 link 태그 추가 해당 위치에 style.css라고 하는 별도의 파일에 저장된 css 파일을 다운받아서 이 위치에 원래 css 코드가 있었던 것 처럼 동작하라고 알려주는 것. 각 웹페이지에 link 태그를 추가 수정이 필요한 디자인.. 코딩공부/WEB2 - CSS 2019. 9. 4.
[5] 반응형 디자인과 미디어 쿼리 반응형 웹 ( 반응형 디자인, Responsive Web ) 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모습으로 바뀌게 하는 것. 웹은 다양한 화면에 대응되는 웹페이지를 만들어야 한다. 다양한 환경에서 적응할 수 있는 기술을 발전시켜 '반응형 디자인' 이라고 하는 최신 기술이 등장 미디어 쿼리 순수한 웹을 통해서, css를 통해서 구현하는 핵심적인 개념 화면의 특성들에 따라서 어떠한 조건을 만족할 때만 CSS이 내용이 동작하도록 하는 것이 가능 화면의 크기에 따라서 어떤 HTML의 요소를 보였다가 안보였다가 동작하도록 설정한다. 화면의 크기가 800px 이면 div 태그를 안보이게 설정 - style 태그 내에서 @media(){} 안에 코드를 작성 Responsive * 전체화면의 .. 코딩공부/WEB2 - CSS 2019. 9. 4.
[4] 그리드 목표 : 웹페이지의 목록과 글이 나란히 위치하도록 디자인 구성 태그 - div, span 오로지 디자인을 위해서 아무의미 없는 태그를 사용할 필요가 있다. ( ex. h1 태그는 '제목' 이라는 의미를 가진다. ) div 태그 : division. default - block level element span 태그 : default - inline level element 그리드를 이용하기 위해서는 각각의 태그가 가지는 부피감을 확실히 알아봐야한다. div 태그는 기본적으로 margin 과 padding 값이 0으로 설정되어있다. 'NAVIGATION'과 'ARTICLE' 요소를 나란히 위치시키기 위해서 최신방법인 그리드를 사용한다. 그러기 위해서는 두 개의 div 태그를 감싸는 부모 태그가 필요하다. .. 코딩공부/WEB2 - CSS 2019. 9. 3.
[3] CSS - 박스 모델 CSS 박스 모델 block level element : 화면 전체를 사용하는 태그 Inline element : 자신이 가진 컨텐츠 만큼의 공간만 사용하는 태그 display 속성으로 사용할 공간(block, inline) 선택 가능 \태그와 태그를 사용했을 때 웹브라우저에 확인해보면 은 자동 줄바꿈이 되어있고, 는 줄바꿈이 되지 않는다. 은 화면 전체를 쓰는 block level element 이고, 는 콘텐츠만큼의 공간만 사용하는 inline element 이다. display 속성으로 기본값을 바꿀 수 있다. >> 중복을 제거한 코드 Margin 과 Padding 크롬 브라우저의 개발자 도구 활용 각 요소에 적용된 디자인 설정을 확인할 수 있다. 웹 페이지 우클릭 > 검사 도구 더보기 > 개발자 .. 코딩공부/WEB2 - CSS 2019. 8. 15.
[2] CSS 선택자의 기본 1. class 선택자 동일한 디자인을 적용시키려는 태그를 동일한 클래스로 그룹화 하여 디자인을 적용시킨다. >> 모든 링크는 기본적으로 검은색. 사용자가 방문했던 페이지는 회색. 현재 페이지는 빨간색. 회색으로 설정하려는 태그에 각각 style 속성을 이용해서 디자인하는 것이 아니라 class라는 html 속성을 부여한다. saw라는 클래스에 대해서 디자인을 설정한다. class="" 속성과 속성의 값으로 들어가는 saw라고 부여한 명칭도 html 문법이다. Ex. 잘못된 문법 - CSS는 "saw라는 이름의 태그"를 찾아서 속성을 부여하려고 한다. 우리의 의도는 "saw라는 이름의 클래스"에 디자인을 설정할 것이다. class 속성의 값으로는 여러개가 들어올 수 있으면 띄어쓰기로 구분한다. 하나의 태.. 코딩공부/WEB2 - CSS 2019. 8. 14.
[1] CSS 를 이용한 HTML 디자인 CSS ? 어렵지만 디자인에 대한 근본적인 해결을 위해 구현된 새로운 언어 Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는 방법 Internal Style Sheet HTML 문서 안의 안에 CSS 코드를 넣는 방법 Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법 1. 태그를 이용한 디자인 (사용하지 않음) CSS가 등장하기 전, 쉽지만 한계가 있었던 방법. 지금은 사용되지 않는 디자인을 위한 태그 웹페이지가 많아지고 웹이라는 기술이 중요해짐에 따라서 이런 방식에 한계를 느끼게 됨. Javakong Cafe 커피 차 고객만족 태그의 한계 태그와 태그는 font태그와는 다름 태그는 'WEB' 이라는 정보가 '링크'라는 것.. 코딩공부/WEB2 - CSS 2019. 8. 13.

티스토리툴바