루체

여태까지 만든 것은 하나의 웹페이지에만 적용이 된 것이므로 다른 웹페이지에도 같이 적용을 해봅시다. 복사해서 붙여넣기 하고 div를 추가하면 됩니다. 이렇게하면 조금 까다롭고 복잡하지 않았나요?? 3개가 아니라 웹페이지가 1억개라고 했을 때 이렇게 바꾸면 얼마나 귀찮고 불편할까요?? 이런 문제가 발생하는 이유는 우리가 작성한 코드 이 CSS코드가 모든 웹페이지에서 중복해서 등장하기 때문입니다. '중복의 제거'가 필요할 때입니다. 그럼 중복을 제거해서 코딩이 얼마나 효율적인지 다시한번 느껴보겠습니다. 우선 style 태그를 제외하고 순수한 CSS만을 복사해서 style.css라는 파일을 만들어서 복사해서 붙여넣겠습니다. 그리고 style태그를 지워줍니다. 그리고 웹브라우저에게 style.css라는 별도의 ..

화면의 크기가 작아지면 현재 웹페이지에 UI는 낭비가 생기고 이상해집니다. 이런 경우에는 만들어 놓은 선도 없애고 본문이 오른쪽에 있는 것보다 밑으로 내리는 것이 깔끔하고 뭐 기타 등등 개편을 할 것입니다. 우선적으로 화면 사이즈를 정해야 합니다. 검사를 열어서 화면사이즈를 체크를 해봅시다. 영상에서는 800px 을 기준으로 하기 때문에 저도 800px로 해보겠습니다. 800px보다 작을때를 다른말로 하면 최대가 800픽셀일 때 입니다. 이런 경우에 어떻게 할 것인지를 지정해 봅시다. 우선 id 값이 grid라고 되어있는 부분이 grid가 아니게 하면 됩니다. 위 사진과 같이 바꾸면 800픽셀보다 화면의 크기가 작을 때 id 값이 grid인 태그의 display가 grid였던 것이 block으로 바뀌게 ..

화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것 그것을 반응형 웹 또는 반응형 디자인, 영어로는 Responsive Web이라고 합니다. 다양한 환경에서 적응할 수 있는 기술들을 발전시킨 끝에 오늘날 최신 흐름까지 나타나게 된 것입니다. 이 반응형 디자인을 우리가 순수한 CSS를 통해서 구현하는 핵심적인 기능인 미디어 쿼리에 대해 알아보겠습니다. 새로운 파일을 하나 만듭시다 그리고 화면의 크기에 따라서 어떤 HTML의 요소를 보였다 안보였다 해보겠습니다. 그걸 구현하기 위해서 아무런 의미 없는 div 태그 하나와 내용을 추가하겠습니다. 그리고 이 웹페이지에 있는 모든 div가 눈에 더 잘보이게 하기 위해서 style도 추가를 해주겠습니다. 이 웹페이지에 있는 Res..

우선 나란히 보이게끔 하고싶은 태그가 어느 부분인지를 파악후 그룹으로 묶어주어야 합니다. 그런데 2개의 독립적인 태그를 의미있는 태그인 h1과 같은 걸로 묶을 수는 없기 때문에 div라는 것을 사용을 합니다. 제일 부모인 div 태그를 grid로 지정하기 위해서 ID값을 줍시다. 그리고 id가 grid인 태그에 대해서 display를 grid로 지정하는 것이 첫번째 그 다음에 grid-template-columns에다가 순서로 봤을때 첫번째가 ol 이므로 150px, 1fr 이런식으로 값을 넣어봅시다. 뭔가 그럴듯한 홈페이지를 만든 것 같아서 기분이 좋다. 이렇게 만든 후 조금씩 디테일을 다듬어 가야겠죠?? 검사를 통해 웹페이지에 들어가서 밑의 사진에 있는 숫자들을 더블클릭하면 웹페이지에서 바로바로 수정..

이번 글은 본문과 내용이 나란히 위치하게 하는 것이 무엇인지에 대한 소개입니다. 여러가지 방법이 있는데 아주 최신의 방법을 쓰려고 합니다. 바로 '그리드'라는 방법입니다. 우선 파일을 새로 만들어서 그리드라는 것이 무엇인지 알아봅시다. 이 각각의 문자에다 테두리를 주고 나란히 배치하는 것을 해보겠습니다. 그러기 위해선 각각 어떤 태그로 묶어주어야 합니다. 지금 그냥 디자인을 하려고 태그가 필요한건데 h1같은 태그를 넣게되면 그 태그는 제목이라는 의미가 있어 사용이 애매하다. 이럴 때 사용을 하는 태그가 바로 라는 태그입니다. 아무런 의미가 없고 그저 디자인의 용도로만 사용하는 태그입니다. div 태그는 block level element 입니다. 같은 목적으로 사용하라고 있는 다른 태그가 하나 더 있는데..

이제 우리가 만든 1.html을 바탕으로 디자인을 해봅시다. 이런식으로 밑줄을 만들고 싶다면 border를 이용하면 됩니다. 그런데 전체 웹페이지에서 보면 WEB이라는 글자의 위치가 너무 애매합니다. 그래서 검사를 눌러 어떤 영역인지 확인을 해봅시다. 확인을 해보니 margin 영역입니다. margin 영역을 0으로 바꿔줍시다. 그러면 애매한 위의 여백이 사라지게 됩니다. 테두리와 WEB의 거리도 벌리고 싶다면 padding값을 조절해줍시다. 그러면 이렇게 자연스러운 여백과 테두리가 생기게 됩니다. 이렇게 박스모델을 사용을 하는것 입니다. 그리고 단락을 구분짓기 위해 세로로 테두리를 그리고 싶으면 아래 사진 처럼 추가하면 됩니다. 그런데 테두리가 너무 오른쪽에 붙어있지 않나요 이유는 ol이 block l..

박스모델을 설명하기 위해서 새로운 파일을 만들어야 합니다. 파일의 이름은 box.html 이고 html의 기본적인 코드를 가지고 있습니다. 여기에 내용을 넣어보겠습니다. 보시면 여기 있는 h1 태그는 화면 전체를 쓰고 있다는 것을 알 수가 있습니다. 그로기 Cascading Style Sheets에 링크를 걸어 보겠습니다. h1태그의 경우에는 화면 전체를 쓰고 있습니다. 그런데 태그의 경우에는 똑같은 태그임에도 불구하고 줄바꿈이 되지 않고 다른 콘텐츠들과 같은 라인에 위치하고 있습니다. 왜 이러냐면 h1 태그는 제목 태그인데 제목 태그는 화면 전체를 쓰는 것이 기본적으로 더 편리하기 때문입니다 기본적으로 링크가 화면 전체를 쓴다면 링크 앞뒤에 있는 콘텐츠가 줄바꿈이 된다면 상당히 불편하기 때문에 기본적으..

CSS의 중요한 토대는 두가지가 있습니다. 1. 효과 2. 선택자 이번 글은 선택자에 대한 토대를 닦는 글이 되겠습니다. 기존에 하던 예제가 수업에 조금 맞지 않아 수정을 하겠습니다. 우선 저 안에 있던 style 속성을 다 지워줍니다. 그럼 다른 목록들과 똑같이 생기게 될 겁니다. 그리고 a 선택자에서 텍스트의 크기를 검정색으로 통일을 해라 라고해서 다 검정색으로 보입니다. 이것도 지워주면 됩니다. 지우면 위에 사진과 같이 될 것입니다. 그러면 이 링크들은 각자 링크가 어떤 속성이냐에 따라서 색깔이 나오게 될 것입니다. 방문하지 않았으면 파란색이고 방문을 하면 보라색으로 바뀌게 됩니다. 그러면 우선 여기 있는 웹 페이지에 있는 모든 a 태그들을 기본적으로 검정색 텍스트로 표기를 할겁니다. 그리고 사용자..

내가 만든 웹페이지에 저 Web이라는 글자가 이 페이지에 메인인데 조금 더 컸으면 좋겠다 라는 생각을 할 수가 있다. 그리고 가운데 정렬또한 하고 싶다라는 생각을 할 수가 있다. 그럼 자연스럽게 어떤 생각을 하게 되냐면 이 WEB이라고 하는 텍스트가 웹페이지에서 어떤 태그인지 찾아야 합니다. 찾아보니 h1 태그입니다. 이 h1 태그의 글을 더 크게 하고 싶다 라는 마음을 가지게 됩니다. 다행스럽게도 지금 h1 태그는 하나니까 선택자로 h1을 지정해서 텍스트를 크게 키워주면 됩니다. 근데 이 방법을 모릅니다. 근데 우리는 우리가 무엇을 모르는지 아니까 검색을 하시면 됩니다. CSS Text Size Property 라는 키워드로 검색을 해봅시다. 검색을 해서 사이트에 들어가보니 Text가 아니라 font인..

모든 'a' 태그를 선택한다라는 점에서 선택자, Selector라고 부릅니다. 그리고 저기 있는 'color:red; 라는 부분은 바로 선택자가 지정하는 태그들에 대해서 어떠한 효과들을 줄 것인가에 대한 것입니다. 선언 또는 효과 Declaration이라고 합니다 또 여기서 color를 Property red를 Value라고 합니다. 여기서 이것을 이해했다는 것은 굉장히 중요한 것입니다. 왜냐하면 모르는 효과를 만나거나 필요한 경우 무엇을 모르는지 알게 된 상태가 된 것입니다. 알게 되었다는 것은 검색을 할 수도 있고 질문을 할 수도 있게 됩니다.