루체

우선 나란히 보이게끔 하고싶은 태그가 어느 부분인지를 파악후 그룹으로 묶어주어야 합니다. 그런데 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..

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

이번 글에는 인기있는 태그 두종류를 살펴볼 것입니다. 웹페이지에서 줄바꿈을 하는 태그를 검색을 해보자 HTML new line tag 이 이라는 TAG는 단지 줄바꿈이라는 시각적 의미만을 가지고 있기 때문에 무언가를 감쌀 필요가 없어서 닫는 TAG가 없습니다. 이 TAG 이외에 다른 줄바꿈 TAG도 있습니다. HTML paragraph tag 라는 키워드로 검색을 해봅시다. 그러면 아마도 이 TAG가 나올 것입니다. 결과는 같지만 TAG는 닫는 TAG가 있습니다. 그리고 이 두가지 방법 중 더 괜찮은 방법은 TAG 입니다. 왜냐하면 이 태그는 이 웹페이지를 정보로써 더 가치있게 만들기 때문입니다. 단락이라는 걸 명확하게 보여주기 때문인 것 같습니다... 단락을 바꿀때 여백이 너무 좁으면 태그는 여러번 쓰..