＊반짝이는＊이끌림

WEB1 HTML을 끝낸지 얼마 안 된 것 같은데 어느새 WEB2의 CSS를 완강하였네요~!~! css를 공부하면서, 기존에 html로만 짜던 것보다 훨씬 효율적이고, 디자인적으로도 예쁘게 짤 수 있다는 것을 알았습니다. 굉장히 기초만 배웠기에 아직 배워야 할 부분들이 많을 것 같아요. 일단 지난번에 html로 만들어 github에 올렸던 페이지부터 css를 활용해 고쳐보고 싶어요~!~! github repository https://github.com/2kkeullim/2kkeullim 웹 사이트 주소 https://2kkeullim.github.io/2kkeullim/ Introducing about 2kkeullim 2kkeullim.github.io

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § CSS 코드의 재사용 → Click! 하나의 웹 사이트에서 모든 웹페이지들에게 동일한 스타일을 주고 싶을 때 중복적으로 코드를 계속 작성하는건 번거로우므로, 코드를 재사용 해 봅시다. 일단 모든 html 파일 들에서 중복되고 있는 CSS 코드들( 태그 제외)을 복사해서 style.css 파일에 붙여넣어 봅시다. 그 후 기존의 html 파일들에서 태그를 지워주고, 태그를 이용한다면, style.css라는 별도의 파일에 저장된 CSS를 기존의 html들에서 사용할 수 있게 됩니다. * style.css * h1 { text-align: center; font-size: 60px; border-bottom:3p..

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § 반응형 디자인과 미디어 쿼리 소개 → Click! 이번에는 화면의 크기에 따라서 웹페이지들의 각 요소들이 반응해 최적화된 모양으로 바뀌게 하는 것, 반응형 웹, 반응형 디자인(Responsive Web)에 대해서 공부해봅시다! 그럼 CSS를 통해 구현하는 핵심적인 개념인 미디어 쿼리(Media Query)부터 알아봅시다. 일단 새로운 html 파일을 만들어보고, 화면의 크기에 따라서 특정 html의 요소를 보였다, 안 보였다하게 해보겠습니다. 일단 간단하게, 태그를 이용해 responsive 글자를 써주고, 반대로 media query의 코드를 max-width:800px로 바꾼다면, 화면의 최대 크기가 ..

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § 그리드 → Click! 그리드를 공부하기 전에, html을 새로 만들어줍시다. navigation과 article, 두 가지 단어를 나란히 배치해주기 위해 단어들을 각각 태그를 이용해 묶어주어야 합니다. 우리가 지금까지 배운 태그들은 의미가 있는 태그들이므로, 아무거나 사용할 수는 없습니다. 이렇게 아무 의미가 없는 경우지만 태그로 묶어주어야 할 때에는 태그 혹은 태그를 사용합니다. 태그는 block line element로서 한 줄 전체를 차지하며, 태그는 inline element로서 해당 텍스트만큼만 차지합니다. 지금은 태그를 써 봅시다. NAVIGATION ARTICLE 그리드를 공부하기 위해서는,..

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § 박스모델 → Click! web2 css 실습을 위해 web1에서 사용했던 html 대신 새로운 파일을 간단하게 만들었습니다. 박스를 만들기 위해 반면 링크는 자기 자신의 콘텐츠 크기만큼만 공간을 사용합니다. 태그와 같은 코드를 사용해 박스를 만들어주었음에도 불구하고, 자기 자신의 텍스트 크기만큼의 박스를 만든 것을 볼 수 있습니다. 이와 같이 html 태그들은 태그의 성격과 쓰임에 따라 화면 전체를 사용하는 태그들과, 자기 자신만큼의 부피를 가지는 태그들로 나뉩니다. 전자의 경우 block level element, 후자의 경우 inline element라고 부릅니다. 이 때 block level ele..

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § CSS 선택자 → Click! 모든 링크, 즉 태그는 기본적으로 검은색으로, 방문한 적이 있는 링크는 회색으로, 현재 방문하고 있는 링크는 빨간색으로 수정해봅시다. 이 때, 코드를 중복으로 작성하지 않고, 동일한 값을 줄 태그들을 class라고 하는 html의 속성을 준 후, 속성의 값(이름)으로 saw를 줍니다. 이름은 원하는 것으로 바꿔도 상관 없습니다~!~! 그리고 위의 1st Grade? 2nd Grade? class의 값으로 saw를 준 "1st Grade?"와 "2nd Grade?"의 색이 회색으로 바뀐 모습을 볼 수 있습니다. class의 경우 한 번에 여러 속성이 들어올 수 있으며, 띄어쓰기..

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § CSS 속성 → Click! css를 활용해 h1 제목 텍스트를 수정해봅시다. 글씨 크기를 수정하기 위해서는 font-size라는 property를 사용해주면 됩니다. 가운데 정렬을 하고싶을 땐 text-align property의 value를 center로 지정해주면 됩니다.

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § CSS의 등장 → Click! CSS는 HTML과는 완전히 다른 언어이기 때문에 CSS를 사용해주기 위해서는 란 태그를 사용해주어야 합니다. 이라는 태그는 속성의 효과만 있어서는 효과를 어느 태그에 지정해야하는지 알 수 없기 때문에 앞에 적용되어야 하는 태그 + { }를 사용해 css의 효과를 지정할 태그를 선택할 수 있습니다. 위의 예시에서 css의 효과가 적용되는 태그인 a는 선택자(selector)라고 하며, 선택자에게 지정될 효과 color:red;와 text-decoration: none;를 declaration으로 부르며, color나 text-decoration는 property(속성)이라 부..