메모장

css를 지배하는 정말 중요한 규칙을 배웠습니다. 그중에서 가장 중요한 것은 선택자와 속성입니다. 속성을 많이 알수록 표현력이 풍부 해지고, 선택자를 많이 알수록 여러분이 알고 있는 속성들을 좀 더 정확하게 표현할 수 있게 됩니다. 마치 인간의 언어에서 주어와 서술어의 관계처럼 , 선택자와 속성의 관계는 css를 지탱하는 두 개의 뿌리 라는 것을 기억합시다. 웹사이트를 꾸며보면서 디자인적으로나 기술적으로 부족한 부분이 보이기 시작할 것입니다. 부족한 부분을 채우기 위해 검색하고 질문하고 고민하다 보면 서로 각자 무관한 듯 떨어져 있던 개념들이 연결되기 시작하고 , 그 연결이 충분히 촘촘해진다면 외부로부터 우리에게 전해지는 배움이 없는데도 내부로 부터 스스로 깨달아서 알게 되는 배움이 시작되지 않을까 합니다.

코드를 여러개의 페이지에 적용 할 때 조금 까다롭진 않나요 ? 만약 웹페이지 수가 4개가 아니라 1억개 라면 어떻게 될까요 ? 그래서 이 웹페이지의 링크에 밑줄을 쳐야 한다면 1억 번을 작업해야 합니다. 우리가 작성한 css 코드가 모든 파일에 중복해서 등장하기 때문입니다. 중복 제거가 필요합니다. 먼저 모든 웹페이지에 중복돼 있는 CSS 코드에서 태그를 제외한 순수한 css 코드만 복사해서 style.css 라는 파일에 붙여 넣어 봅시다. 그리고 태그의 내용을 다 지우고 웹 브라우저에게 이렇게 이야기 합니다. " 웹 브라우저야 , 마우스 커서에 있는 위치에는 style.css라는 별도의 파일에 저장된 css 를 내려받아서 원래 그 코드가 있었던 것처럼 동작해" --> 이런 역할을 하는 것이 바로 라는 ..

화면의 크기가 줄어들면 선도 없어지고 본문이 아래쪽에 배치되며 'web' 이란 타이틀도 작아지게 하는 것입니다. 먼저 화면 크기를 지정해보자. 화면 크기가 800px보다 클 때 , 800px 보다 작을때의 디자인을 미디어 쿼리를 통해 다르게 만들어보겠습니다. 그런다음'grid'부분을 'grid'가 아니게끔 만들면 된다. #grid 코드를 복사해서 미디어 쿼리 코드 안에 넣어 봅니다. 그리고 display:grid를 display: block으로 바꿉니다. 선을 없애보겠습니다. 태그의 테두리도 지워보겠습니다. 결과적으로 작은 화면에서는 페이지가 더 잘 보이게 됐고 , 큰화면 , 즉 800px보다 화면이 커지면 넓은 화면의 특성을 십분 발휘 하는 레이아웃으로 바뀌는 모습을 볼 수있습니다.

현대적인 웹 어플리케이션을 만들때 굉장히 중요한 요소라 할 수 있는 반응형 디자인의 흐름을 알아봅시다. 화면크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것을 반응형 웹 또는 반응형 웹디자인, 영어로는 'responsive web' 이라고 합니다. 이젠 반응형 디자인을 순수한 웹 기술인 css를 통해 구현하는 핵심적인 개념인 미디어 쿼리에 대해 살펴보려고 합니다. 예시로 만든 'Responsive'의 크기를 알아보고자 개발자 도구를 들어가서 확인한다 ! 화면의 800px보다 크면 화면이 안보이게 만들어볼 예정이다. mim은 최소값, max는 최대값을 의미하는데 min 대신 max를 넣으면 screen width< 800px라는 의미가 됩니다. 즉 , 미디어 쿼리를 활용하면 화면크..

태그와 , 태그를 나란히 놓고 싶을때 나란히 놓기 위해 먼저 태그와 태그를 묶는다. 이때 두 태그를 묶기위해 ,, 태그를 쓸 수 없다. 왜냐면 모두 의미가 있고 기능이 있기 때문이다. 의미도 없고 기능도 없는 무색무취 태그를 사용하여 묶어보도록 하자 태그와 태그를 먼저 태그로 묶는다. ,를 묶은 태그와 태그 두개가 남는데 , 이 두개를 또 감싸는 공통의 부모태그가 필요하다. 태그로 또 크게 한번 묶는다. 값을 세팅 해보겠습니다. 여기서 태그의 padding을 33px; 로 바꾸겠습니다. 글 밀림 현상이 보여집니다. 해당 영역을 조정하기위해 태그에 id ="article" 을 지정하고 padding을 25px정도로 설정합니다. 위 코드 처럼 id값이 'grid'인 태그 밑에 있는 태그 라고 지정하면 훨씬 ..

기획서 같이 목록과 본문이 나란히 위치하는 디자인을 해보려고 한다. 바로 그리드 이다. 틀을 먼저 만들어보자 ! NAVIGATION, ARTICLE 두 단어에 각각 테두리를 주고 나란히 배치해 보겠다. 디자인 이란 목적을 위해 어떤 의미도 없는 태그를 사용해야 할 때가 있는데, 그럴때 사용하는 태그가 무색무취 태그 이다. 그리고 태그는 기본적으로 블록 레벨 엘리먼트 이기 때문에 화면 전체를 쓰므로 줄바꿈이 된다. 태그와 똑같은 목적의 태그가 태그 이다. 태그는 인라인 엘리먼트라서 목적에 따라 태그 또는 태그 를 사용하면 된다. 두 개의 요소를 나란히 놓기 위해 그리드를 써보겠다. 그러려면 두개의 태그를 감싸는 부모가 필요하다. 부모태그의 id 값을 'grid' 로 지정한다. 두 개의 태그를 나란히 배치하..

밑줄을 긋기 위해선 테두리를 사용하면 되며 , 그 테두리는 WEB 태그에 주면 된다. 그런데 지금 필요한것은 아래쪽 테두리 이므로 border 대신 border-bottom을 쓰면 된다. ... 생략 ... ... 생략 ... 그런데 위치가 애매하다. 개발자 도구(F12) 를 열어서 margin 값 때문임을 확인 할 수 있다. margin은 없어졌지만 web이 아래 밑줄이랑 너무 붙어 있다 . padding 값을 지정해주자( 20px정도) 태그를 사용하여 세로 줄을 그어 주자 오른쪽 끝에 세로줄이 생성된 것을 확인 할 수 있다. 태그는 화면 전체를 쓰는 블록 레벨 엘리먼트 이기 때문에 오른쪽 끝에 생기는 것이다. 이럴땐 width값을 지정해서 태그의 크기를 지정하면 된다. margin 이 또 생겼으므로 ..

태그가 화면 전체를 쓰고 있음을 알 수 있습니다. 이제 를 한번 달아보겠습니다. 그러나 태그는 똑같은 태그임에도 줄바꿈 되지 않고 다른 콘텐츠와 같은 라인에 위치합니다. 그것은 태그는 제목 태그인데 제목태그는 화면 전체를 쓰는 것이 기본적으로 더 편리하기 때문입니다. 테두리는 영어로 border 입니다. border에서 테두리의 두께는 border-width 이고 여기서는 5px로 지정하겠습니다. 테두리 스타일, 즉 테두리가 점선인지 실선인지를 지정하는 건데 , 단선인 경우 border-style: solid; 를 지정합니다. 화면 전체를 쓰는 태그들을 블록 레벨 엘리먼트 , 자기 자신의 콘텐츠 크기만큼 쓰는 태그들을 인라인 엘리먼트라고 합니다. 어떤 태그들이 화면전체를 쓰고 , 어떤 태그는 부분을 쓴다..

css 를 지배하는 두 가지 중요한 토대가 있습니다. 첫번째는 효과 이고 두번째는 선택자 입니다. 선택자에 대한 요모조모를 살펴보면서 여러분이 이제 검색할 수 있고, 질문할 수 있고, 궁금해 할 수 있게 하는 가장 중요한 이야기를 해보겠습니다. 모든 링크는 기본적으로 검은색, 사용자가 방문했던 각 글들의 링크색은 회색, 현재 페이지의 링크는 빨간색으로 바꿔보겠습니다 ! 그런데 이렇게 되면 중복이 발생합니다. 그럼 먼저 중복된 코드 먼저 없애겠습니다. 해당하는 두 태그에 대해 class라는 HTML 속성을 지정해주면 된다. 클래스 "saw" 로 묶고 클래스는 . 을 붙여준다. saw 앞에 . 을 붙이는 순간 이 선택자는 웹페이지에서 class 가 "saw" 인 모든 태그를 가리키는 선택자가 된다. 그 선택..

'web' 이란 정보에서 텍스트를 크게 만들고 , 정렬을 해보겠습니다. 추천해드리고 싶은 검색어는 ' css text size property' 입니다. 폰트(font)라고 써야한다는 사실을 알 수 있고 size가 적혀 있습니다. 여기서 px는 컴퓨터에서 사용하는 단위 입니다. 다음으로 'web' 이란 텍스트를 가운데로 정렬하기 위해 검색 해봅시다. 'css text center property' 라고 검색해봅시다. text-align 라는 것을 알수 있습니다.(align은 '정렬하다' 라는 뜻입니다.)