루체

변수라는 것은 바뀔 수 있는 어떤 값이라고 할 수 있습니다. 예를 들어서 x = 1이고 y=1일 때 x+y는 2입니다 여기서 x의 값을 1000으로 변경해서 더하기를 하면 1001이 됩니다 바로 이 맥락에서 여기서 x라는 것을 변수, 영어로는 variable이라고 합니다. 그리고 여기 있는 = 이것을 대입 연산자라고 합니다. 오른쪽 항에 있는 왼쪽에 있는 변수에 대입한다라는 대입연산자입니다. 이 대입 연산자는 하나의 특징이 더 있습니다. 좌항과 우항을 결합해서 우항의 값을 만들어 낸다라는 뜻입니다. 모르셔도 되는 내용입니다. 항상 변하지 않는다는 숫자인 상수 영어로는 constant에 숫자를 대입하려고 했기 때문에 오류가 납니다. 그러면 상수를 쓰면 되지 변수는 왜 쓰는가? 라는게 궁금할 수 있습니다. ..

문자열(String)과 숫자(Number)의 데이터 타입에 대해서 알아보기 위해서 아무 사이트에서 검사를 켜봅시다. 검사 안에서 Console을 찾아서 눌러줍시다. 여기서 이제 숫자를 표현해보겠습니다. 숫자를 표현하기 위해선 그냥 숫자를 입력해주시면 됩니다. 너무 당연해보이지만 이것이 당연하지 않을 수 있습니다. 이렇게 입력을 해봅시다. 입력을 하면 창이 뜨면서 숫자 1이 뜨게 될 것입니다. 그런데 이렇게 테스트를 할 때마다 alert를 계속 치는 것과 그 창을 끄는 것이 귀찮을 수 있습니다. 그럴 땐 아래 와 같이 해주세요. 1+1를 입력을 했더니 아무런 창도 뜨지 않고 결과가 보이는 것을 알 수가 있습니다. 그리고 이 숫자, number라는 데이터 타입에서 아주 중요한 것은 연산입니다. 이 더하기는 ..

여태까지 만든 것은 하나의 웹페이지에만 적용이 된 것이므로 다른 웹페이지에도 같이 적용을 해봅시다. 복사해서 붙여넣기 하고 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 태그들을 기본적으로 검정색 텍스트로 표기를 할겁니다. 그리고 사용자..