본문 바로가기
728x90

전체 글

 (37)
[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): 속성 선택자 [속성] 선택자: [속성 = 값]: [속성 ~= 값]: [속성 |= 값]: [속성 ^= 값]: [속성 $= 값]: [속성 *= 값]:
[HTML/CSS]CSS기초 | 텍스트 스타일 텍스트 스타일 Font-family: 글꼴 지정(두 단어 이상으로 된 글꼴일 경우 따옴표 사용, 지정 글꼴이 없을 경우 대비하여 두 번째, 세 번째 글꼴지정) @font-face: 웹 폰트 적용 | font-family: 글꼴 이름, src: url(글꼴 파일 경로), format(파일 유형) Font-size: 글자 크기 조절 절대 크기: xx-small, x-small, small, medium, large, x-large, xx-large 상대 크기: larger, smaller 크기: em, ex, px, pt로 직접 지정(주로 px사용, 모바일은 em사용), 백분율(%) Font-weight: 글자 굵기 지정(normal(기본값), bold, lighter, bolder, 100~900(400:..
[HTML/CSS] CSS 기초 | 스타일 우선순위 | 명시도 내부 스타일 시트: 태그 사이에 태그 안에 작성 외부 스타일 시트: 태그 사이에 태그를 이용해 연결 인라인 스타일: 해당 태그에 style속성 이용(간단한 스타일일 때 사용) 선택자에 따른 css 작성 방식 전체 선택자: * {속성: 속성 값;} 태그 선택자: 태그 {스타일} Id 선택자: #id명 {스타일} 그룹 선택자: 이름1, 이름2 … {스타일} 캐스캐이딩(Cascading) 스타일 우선 순위 사용자 스타일 시트 > 제작자 스타일 시트 중요 스타일 시트 = 뒤에 '!important'를 붙인 스타일 브라우저 스타일 시트: 브라우저 기본 지정 스타일 명시도(Specificity) 인라인 스타일 Id 스타일 클래스 스타일 태그 스타일 Source Order: 중요도와 명시도가 같다면 소스 서 적용, ..

티스토리툴바