본문 바로가기

HTML & CSS

 (19)
CSS 기초 개념 - CSS 코드의 재사용 #07 이전의 우리는 웹페이지 1개에 css를 입혔고, 미디어 쿼리도 사용했다. 나머지 페이지에도 똑같은 작업을 해보자. 을 복사해도 맞지 않을 것이다. 라는 키워드를 깜빡했다. 그것도 추가해야 할 것이다. 총 4페이지를 통일 시키는데 대략 10분 정도가 걸렸다. 그런데 1억개의 페이지를 쉽게 바꿔야 한다면? 만약에 링크의 줄을 모두 다시 생성해야 한다면? 간단한 코드를 작성하더라도 1억개의 페이지를 모두 바꿔야 한다. css 코드가 모든 페이지에 중복되기 떄문에 문제가 발생한다. 이 중복을 제거해보자. 지금까지 작성한 css코드를 복사해서 보내버리자. 새로 생성한 style.css 파일에 넣어두자. 그리고 에 다음과 같은 코드를 집어넣는다. 이 웹페이지에 공통된 스타일을 복붙한다. 그러면 중복된 코드는 삭제되..
CSS 기초 개념 - 반응형 디자인 & 미디어 쿼리 #06 이미 우리가 만든 사이트는 브라우저 크기에 따라서 반응하는 반응형 웹이다. 웹은 거의 모든 운영체제에서 동작하는 정보 시스템이다. 그래서 모든 화면에 대응되는 웹 페이지를 만들어야 했다. 하지만 그 과정을 극복하기는 어려웠고 긴 시간동안 웹의 단점으로 작용했다. 하지만 사람들은 다양한 환경에서 적응할 수 있는 기술을 만들어 반응형 디자인을 만들어냈다. 반응형 디자인은 화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해서 동작하게 되는 것이다. 반응형 디자인은 순수한 CSS를 통해서 구현해내는 방법인 미디어쿼리를 알아보자. Respnsive 이와 같이 코드를 작성했다. 그런데 나는 화면의 크기에 따라서 구성을 다르게 하고 싶다. 이것이 미디어 쿼리이다. 화면의 크기가 800px보다 크냐 작냐에 따라서 구..
CSS 기초 개념 - 그리드 #05 기획서와 내가만든 웹 페이지랑은 너무 다르다. 리스트와 본문을 나란히 배치하고 싶다. 어떻게 해야할까? 이 배치 방법은 여러가지가 있는데, 우리는 grid를 사용할 것이다. 엘류가 오랜 시간동안 정보를 잘 배치하는, 레이아웃을 잘 짜는 방법을 코드를 통해 효율적으로 하는데 어려움을 많이 겪었다. 여러가지 시행착오를 통해 다양한 방법이 나왔지만 가장 최근에 등장한 grid를 통해 알아보자. 우리는 새로운 html 파일을 만들자. NAVIGATION ARTICLE 여기서 NAVIGATION과 ARTICLE을 따로 분류를 하고 싶은데, h1을 사용하기가 부담스럽다. 왜냐하면 h1이라는 정보적 의미로 담을 생각이 없기 때문이다. 단순히 시각적으로만 분리를 하고 싶을 뿐이다. NAVIGATION ARTICLE 이..
CSS 기초 개념 - 박스 모델 활용 #04 h1 { font-size: 50px; text-align : center; border:1px solid gray; } 이 그림을 h1 { font-size: 50px; text-align : center; border-bottom:1px solid gray; } 이렇게 변경할 수 있다. 또, h1 { font-size: 50px; text-align : center; border-bottom:1px solid gray; margin: 0; padding : 20px; } 이런식으로 보더와 간격을 만들 수 있다. 이제 밑의 리스트를 만져보자. ol{ border-right: 1px solid gray; } 이렇게 우측에 선이 나타난다. 여백을 없애주고 싶다. ol{ border-right: 1px so..
CSS 기초 개념 - 박스 모델 #03 우리는 이러한 디자인을 할거다. 우리는 박스모델이라는 개념을 알아야 한다. 새로운 파일을 만들자. 청춘 돌아가는 시계바늘 찢어지는 하얀 달력 이상(idea)은 아주 큰데 현실은 몰라주고 갖은 건 꿈이 전분데. 돌아오지 못할 강물처럼 흘러간다. 다시 오지 않는 아름다운 나의 청춘 보면 태그가 되어있는 '청춘'은 줄바꿈이 되어있지만 태그가 되어있는 idea는 줄바꿈이 되어있지 않다. 이 차이는 무엇일까? 이것은 h1태그는 제목태그이고, 화면 전체를 사용해야하는 태그이기 때문이다. 링크 태그는 줄바꿈을 할 필요가 없는 태그이기 때문이다. 그런데 그것을 더욱 시각적으로 보는 방법을 보고 싶다. 그 범위를 알고 싶은 것이다. 우리가 그 테두리를 그려보자. h1{ border-width : 5px; border-c..
CSS 기초 개념 - 구글링 요령 #02 > property를 스스로 알아내는 법 만약 제목을 가운데 정렬하고 크기를 더 키우고 싶다면? 검색을 해보자. 'css text size property' 검색. https://www.w3schools.com/cssref/pr_font_font-size.asp value에 대한 이야기도 있다. 이제 가운데 정렬을 해보자 "css text align property' https://ofcourse.kr/css-course/text-align-%EC%86%8D%EC%84%B1 글꼴도 변경해볼까? 'css text font property' https://www.w3schools.com/cssref/pr_font_font.asp font관련 속성만 나온다. 'css text font value' 그러면 fo..
CSS 기초 개념 - 기본 문법 #01 물론 안에 위의 코드에서 style이라는 태그는 효과만 있어서는 이 효과를 누구에게 지정할지 설명할 수 없기 떄문에 a {}라는 코드가 추가적으로 더 필요한 것이다. 이 웹페이지에서 우리가 지금 주고 싶은 효과를 누구에게 줄 것인가를 선택하는지를 결정하기 때문에 선택자(selecter)라고 부른다. 괄호안에 들어가는 내용(color : red;)는 효과라고 부르며 영어로는 declaration(선언)라고 부른다. 청춘 이 declaration은 우리가 style 속성이 위치하고 있는 태그에게 효과를 주기 때문에 선택자를 사용할 필요가 없다. 이렇게 우리가 style을 사용하기 위해서는 두 가지 방법이 있다. 첫 번째는, 이렇게 하면 링크가 걸리면서 자동으로 생성된 밑줄이 제거된다. 또한, 하나의 글에만 ..
CSS 기초 개념 - 탄생 배경 #00 HTML을 통해서 문서를 만들 수 있게 됐지만, 불평이 넘쳐날 수 밖에 없었다. 예쁘지 않기 때문이다. 그래서 웹 페이지를 꾸미는 방법에 고민이 생겼다. 그래서 두가지 방법을 고안했다. HTML에 디자인 관련 태그를 만드는 것과 새로운 디자인 언어를 만드는 것이었다. 처음에는 HTML에서 디자인과 관련된 태그를 만드려고 애를 썼다. 하지만 이내 한계를 깨닫고 CSS라는 언어를 만들었다. 우선 지금은 사용하지 않지만 한계에 부딪혔던 HTML이 만든 태그를 알아보자 라는 태그이다. 뜨거운 감자 - 노래 색깔이 바꼈다. 검색엔진은 위의 코드를 보고 이렇게 해석한다. 뜨거운 감자 - 노래는 h1이므로 중요한 키워드로 쓰였다. 뜨거운 감자 - 노래는 a이므로 href의 해당 주소로 연결되어있다. 하지만 뜨거운 감..
HTML 기초 개념 - 부록 : 동영상, 댓글 삽입 #11 > 동영상 삽입 쉽게 동영상을 삽입할 수 있다. >부록 : 코드의 힘 - 댓글 기능 댓글 웹 사이트의 가장 기초적인 상호작용 수단이다. 댓글 기능은 직접 구현하는 것은 HTML만으로는 불가능하다. Back-end의 기술을 알아야 한다. database까지 활용해서 구현하는 방법이 필요하다. 그 기술들만 있어서 되는 것도 아니라 상당한 기술력이 필요하다. 이유는 스팸이 달리기 때문이다. 우리에겐 들어온 댓글이 스팸인지 아닌지를 판단하는 차단 기능이 필요하다. 그리고 사용자들이 이미지를 업로드하거나 서비스 연동을 하고 싶어할 것 같다. 댓글을 우리가 직접 구현하는 것은 어려운 일이다. 개발을 우리가 직접하기 전에 해보면 좋을 것은 남들이 한 것을 끌어오는 것이다. 우리는 여러가지 서비스를 이용할 수 있다. ..
HTML 기초 개념 - 웹 서버와 웹 브라우저의 통신 #10 웹 브라우저가 웹 서버의 요청을 할 때는 웹 서버의 주소, ip주소가 필요하다. 우리가 ip 주소를 얻어냈다면 http://(ip주소)/index.html를 입력해서 접근할 수 있다. 우리는 ip주소를 어떻게 알아내보자 192.168.43.199이다 http://192.168.43.199/index.html을 입력하면 아까의 http://127.0.0.1/index.html 과 같은 내용이 나온다. 192.168.43.199는 개인 고유의 IP고 127.0.0.1은 본인의 웹 서버를 가리키는 변수라고 이해하자.

티스토리툴바