Study (31) 썸네일형 리스트형 [HTML/CSS] css :root(가상선택자)를 통해 css 변수 선언 해보자! 보통 CSS문서에서 사이트 구축을 할 때나, 유지보수 작업을 하다보면 여러 곳을 임의로 바꿔야하고, 공통적으로 들어가는 부분들이 있다. CSS에서 이를 간단하게 변수를 선언하여 사용하면 좀 더 쉽게 작업을 할 수 있게 하기위한 방법을 알아보려한다. 1. :root 의사 클래스 :root는 문서 트리의 루트 요소를 선택하며, HTML의 루트 요소는 요소이므로, :root와 html은 같다. 2. CSS 변수(사용자 지정 속성) CSS:root를 이용해 가상선택자를 이용해 재사용할 값을 담아줄 변수를 만들어 저장해준다. 보통 웹사이트 하나를 만들면, 기본적으로 reset.css, common.css, sub.css 등 많은 양의 CSS를 가지고 있다. 유지보수를 하다보면 임의로 값을 변경하거나 컬러변.. [HTML/CSS] 표(table)의 태그를 사용해서 깔끔하게 만들어보자 저번에 table을 만드는 방법과 tr, th, td에 대한 기본 정의를 한 적이 있다. 이번에는 table의 태그와 css를 이용해 좀 더 깔끔하게 만들어 볼 것이다. 1.thead와 tbody란? 와 는 단어에서 알 수 있듯이 thead는 html에서 각 영역별로 head,body,footer라고 나누듯 table에서 콘텐츠 영역을 나눠 그룹화시킬 때 사용한다. 그리고 thead와 tbody는 table의 자식요소로써 table 밖에서 사용하면 안됨. 또한, table에서 , 요소 아래에 위치힌다. 2. caption, colgroup이란? caption와 colgroup 또한 table의 자식요소로써 caption는 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다. 나 같은 경우 웹접근성으.. [HTML/CSS] border-radius를 통한 라운딩 처리 생각보다 border는 많이 사용되는데 사용방법에 따라 다양한 표현처리를 할 수 있다. 보통은 버튼이나 input 등에 사용되는 편이며, 여러 가지 형태로 테두리 모양을 변형할 때도 사용되며 유용하게 쓰인다. border-radius는 전체 라운딩을 처리할 때 모서리의 값을 줄 수 있으며, 값이 다를 경우 시계방향 순서대로 값을 주면 된다. 이렇게 위의 그림처럼 각 모서리에 해당되는 곳만 라운딩을 주고싶다면 해당하는 부분에 값을 주면된다. .box { border-top-left-radius: 25px; border-bottom-left-radius : 25px; border-top-right-radius : 25px; border-bottom-right-radius : 25px; } 위의 이미지처럼 크.. [JS]자바스크립트 기초 | 연산자 Opertors , -, *, / , % 거듭제곱 ** 우선순위 수학과 동일하게 곱셈과 나누셈이 덧셈과 뺄셈보다 먼저이다. 연산자 줄여서 쓰기 let num = 10; num = num + 5; num += 5; //위의 식과 동일한 결과가 나옴 num *= 5; //곱하기 num -= 5; //빼기 num %= 5; //나머지 console.log(num); 증가 연산자, 감소 연산자 값을 1만큼 증가 또는 감소 시킨다. let num = 10; num++; //증가 num--; //감소 console.log(num); ++나 --를 앞에 쓰느냐 뒤에 쓰느냐에 따라 차이가 있다. let num = 10; let result = ++num; console.log(result); 뒤에 두면 result의 값이 증가 시키기.. [JS]자바스크립트 기초 | 형변환 String() // 문자형으로 변환 Number() // 숫자형으로 변환 Boolean() // 불린형으로 변환 "Hello " + "world" = "Hello world" 100 + 200 = 300 "100" + 200 = ??? 문자형+ 문자형은 문자형을 숫자형 + 숫자형은 두 수를 더한 값을 보여주는데 자료형이 다르면 의도치 않은 동작이 일어날 수 있다. const mathScore = prompt("수학 몇점?"); const engScore = prompt("영어 몇점?"); const result = (mathScore + engScore) / 2; console.log(result); prompt를 통해 숫자 받아왔을 경우 const mathScore = 90; const engScor.. [JS]자바스크립트 기초 | alert, prompt, confirm alert 알려주는 역할 메세지를 띄우며, 확인을 누르기 전까지 닫히지 않는다. 사용자와 상호작용을 하기보단 일방적으로 알려주는 용도로 사용한다. alert(); prompt 입력 받는 역할 사용자에게 메세지를 보여주고, 입력 받을 수 있는 값을 제공한다. const name = prompt("이름을 입력하세요."); alert("환영합니다, " + name + "님"); const name = prompt("이름을 입력하세요."); alert(`환영합니다, ${name}님. 환영합니다.`); 위의 코드와 같이 사용하면 이름을 입력하는 창이 먼저 뜨며, 이름을 입력하면 alert창이 뜬다. 백틱으로 해도 동일하게 작용하는 것을 확인할 수 있다. prompt창을 취소하면, null값을 받는다. const .. [HTML/CSS] 가상 클래스 (pseudo class) 가상 클래스(pseudo class) :link 선택자: :visited 선택자: :hover 선택자: :active 선택자: :focus 선택자: 구조 가상 클래스(특성 위치에 있는 요소를 찾아 스타일 지정) :enabled와 disabled 선택자: Checked 선택자: Root 선택자: :nth-child(n)와 :nth-last-child(n) 선택자: :nth-child(n) : :nth-last-child(n) : 해당 요소들이 모두 부모 요소를 갖고 있어야 한다. 그 외 가상 클래스 :target 선택자: 앵커 목적지에 스타일 적용 :not 선택자: 특성 요소가 아닐 때 스타일 적용(괄호 안에 있는 요소 제외) | p:not(#ex) {color:blue;} 가상요소 | 내용 일부만 선택해.. [HTML/CSS] 연결 선택자 속성 선택자 연결 선택자 하위 선택자(= 자손 선택자 / descendant selector): 자식 선택자(child selector): 인접 형제 선택자(adjacent selector): 형제 선택자(sibling selectop): 속성 선택자 [속성] 선택자: [속성 = 값]: [속성 ~= 값]: [속성 |= 값]: [속성 ^= 값]: [속성 $= 값]: [속성 *= 값]: 이전 1 2 3 4 다음 목록 더보기
