Let's Code/HTML・CSS
-
CSS로 배경색에 그라데이션 입히기Let's Code/HTML・CSS 2021. 2. 11. 00:22
CSS background에 있는 linear-gradient 기능으로 배경색에 그라데이션을 입힐 수 있다. Linear-gradient 기능은 의 구조로 사용할 수 있다. 방향을 지정하지 않았을 시, 디폴트는 위에서 아래 방향이 된다. background: linear-gradient(red, blue); 방향은 To top, to bottom, to right, to left로 지정할 수도 있으며, 0 deg, 180 deg, 90 deg, 270 deg로 지정할 수도 있다. 디폴트는 To bottom, 그리고 180 deg이다. deg의 경우 숫자가 커질수록 시계 방향으로 이동한다. background: linear-gradient(0deg, yellow, lightGreen); background..
-
HTML 기본 정리Let's Code/HTML・CSS 2020. 12. 30. 00:43
오랜만에 HTML을 복습하면서 기본 개념들을 한번에 정리하려고 한다. 이미 개념에 대해 알고 있다는 전제 하에, 급하게 작업할 때 빠르게 훑어볼 용도. HTML의 기본 구조 HTML은 프로그래밍 언어가 아닌, 프로그램의 구조를 명시하기 위한 마크업 언어Markup Language이다. HTML의 기본 단위는 Element이며, Element는 주로 Opening tag / 사이에 오는 Content / Closing tag의 구조를 가진다. Closing tag의 경우 /로 구분한다. 이 중 content Tag 하나로만 존재하는 경우 Empty tag라고 부른다. (ex. ) 주로 하나의 HTML 문서는 하기와 같은 구조를 가지고 있다. 은 컴퓨터가 해석할 수 있도록 html의 특정 버전을 알려주는 태..
-
CSS로 조건부 코드 짜기Let's Code/HTML・CSS 2019. 8. 20. 23:32
개인적으로 느끼는 파이썬과 CSS의 차이 (얼마 안 배웠지만) 파이썬에서는 조건부를 if 또는 for로 구현하곤 했었다. HTML이나 CSS에서는 파이썬과 같은 문장 느낌의 직관적인 코드 대신 명사 위주가 많다는 게 개인적인 감상. 예를 들어 파이썬에서 = 이 있었다면 여기서는 :이 있는 느낌? 파이썬에서는 width가 뭔지 지정해준 후, if width > 800 grid(width) 하고 들여쓰기 한 뒤 코드를 짜주면 코드가 성립한다. grid() function은 존재하지 않지만 있다고 치자. CSS에서는 유사한 표현을 @media(min-width:800px) { #grid { display: grid; } } 이렇게 표현한다. 굉장히 문장 같지 않고 단어식이다. 파이썬이 조건문을 작성하는 식이었..
-
CSS : 그리드 미리보기Let's Code/HTML・CSS 2019. 8. 19. 21:58
참조: 그리드 - 생활코딩 이번 강의의 결과물 이번 강의를 통해 알게 된 것 div의 존재 HTML/CSS에는 위계질서가 중요하다! 1. div 태그 태그는 '태그를 위한 태그'로서, 그 자체로는 아무 의미를 가지지 않는다. 여러 태그들을 하나의 클래스 또는 아이디로 감싸고 싶을 때, 또는 그러한 묶음을 하나의 요소로 지정하고 싶을 때 '포장지' 같은 개념으로 사용한다. 이 때, block level의 경우 , in-line의 경우 을 흔히 쓴다고 한다. 2. 코드 간 계층 물론 이 때의 위계질서란 직급이 아니라, 어떤 코드가 '선행'하는지, 또는 어떤 코드를 '포함'하는지의 여부이다. 메뉴 강연 읽을거리 충전 강연 제가 들은 강연을 정리해놓았습니다. 커리어연세에서 열리는 강의, CP Team에서 열어준..
-
CSS : 개념과 특징, 박스 모델Let's Code/HTML・CSS 2019. 8. 17. 13:54
출처: 생활 코딩의 WEB 2 강좌. CSS의 개념 HTML 태그를 디자인적으로 보완하기 위해 개발되었다. HTML 태그의 디자인을 일일이 수정할 필요 없이, 클래스로 묶어 대량 수정이 가능하다는 점에서 편리하다. 이를 위해서는 CSS 내에서 selector 지정이 필요하다. Selector는 디자인을 수정할 단위이며, 같은 효과를 적용할 태그의 묶음이다. ex. h1 (헤더), a (링크), a:visited (방문한 링크), ol (자동정렬된 리스트), 또는 앞에 #를 붙여 사용자가 별도 지정한 class나 id에 효과를 일괄 적용할 수 있다. a:link { color: darkgray; text-decoration: none; } a:visited { color: #32a1ce; } a:hover..