본문 바로가기

Web79

[CSS] 케스케이딩 1. 케스케이딩이란? : 스타일 시트에서는 우선순위가 위에서 아래로(계단식) 적용된다는 의미 : 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙 2. 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다. 얼마나 중요한가? ☝🏻 사용자(user)가 지정한 스타일 ✌🏻 제작자(auther)가 지정한 스타일 🤟🏻 웹 브라우저(browser)가 기본으로 정해놓은 스타일 적용범위는 어디까지인가? [1순위] !important: 어떤 스타일보다 우선 적용하는 스타일이다. ([ex] li {... !important;}) [2순위] 인라인 스타일: 태그 안에 style 속성을 사용해 해당 태그만 스타일을 적용한다. ([e.. 2023. 5. 7.
[CSS] 상속 1. 상속이란? : 태그를 디자인할 때 어떤 효과를 주게되면 해당 태그의 하위 태그가 그 효과를 이어 받는 성질 수업내용 html css javascript 1번 코드에서 텍스트의 색상을 변경 시키려면 어떻게 해야할까? 2번 코드처럼 li와 h1태그 모두에게 색상을 부여할 수 있다. 다른 방법도 있다. 1번 코드의 최 상위 부모 태그에게 색상을 부여하면 하위 모든 태그들의 색상이 변경된다. 최 상위 부모 태그는 무엇일까? 이다. 따라서 3번 코드로 색상을 부여하면 모든 태그의 색상이 변경된다. 2. 상속 되는 속성 vs 상속 되지 않는 속성 상속 되는 속성 color font line-height text-align white-space visibility opacity 상속 되지 않는 속성 width .. 2023. 5. 7.
[CSS] 웹 폰트 구글 웹 폰트: https://fonts.google.com/?authuser=1 네이버 웹 폰트: https://hangeul.naver.com/font [구글이나 네이버에서 폰트를 제공해주는 경우] 1. 마음에 드는 폰트를 선택한다. 2. 웹 폰트 url을 복사해서 head에 작성해준다. 3. CSS로 글꼴을 선택해준다. 안녕하세요! [구글이나 네이버에서 폰트를 제공해주지 않는 경우] 1. 폰트 파일을 다운로드 하고 html 파일에 넣어준다. 2. font face 속성을 이용해서 웹 폰트를 정의해준다. @font-face{ font-family: ; src: ; } 2023. 5. 6.
[CSS] font 1. font-family(글꼴 지정) font-family: 2. font-weight(굵기) font-weight: normal: 기본값, 보통 굵기 bold: 굵게 bolder: 원래보다 더 굵게 lighter: 원래보다 더 가늘게 100~900: 100은 가장 가늘게, 900은 가장 굵게 3. line-height(줄 간격) line-height: px: 고정된 값 숫자: 해당 숫자의 배수만큼 상대적으로 간격이 생긴다. 4. letter-spacing, word-spacing letter-spacing: 글자와 글자의 간격을 조절한다. word-spacing: 단어와 단어 사이의 간격을 조정한다. 5. font(축약형) font: font는 위의 있던 속성들을 한번에 작성하는 축약형 코드이다. 순.. 2023. 5. 6.
[CSS] text-align 종류 설명 start 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다. end 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다. left 왼쪽에 맞추어 문단을 정렬한다. right 오른쪽에 맞추어 문단을 정렬한다. center 가운데에 맞추어 문단을 정렬한다. justify 양쪽에 맞추어 문단을 정렬한다. match-parent 부모 요소에 따라 문단을 정렬한다. https://webstoryboy.co.kr/1677 2023. 5. 6.
[CSS] Color color: 1. 16진수로 표현하는 방법 6자리의 16진수는 앞에서부터 두 자리씩 묶어서 #RRGGBB로 표시한다. 여기서 RR자리에는 빨간색, GG자리에는 초록색, BB자리에는 파란색의 양을 표시한다. 16진수는 외운다기 보다는 이전에 설정했던 색상이 무슨색인지 파악하고 그 색상을 다른 곳에 적용하는 과정에서 복사 붙여넣기 하면서 많이 쓰인다. color: #FF0000 2. hsl과 hsla로 표현하는 방법 hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말이다. (a는 alpha로 불투명도를 줄 수 있는 값이다.) color: hsl(0, 100%, 50%) color: hsla(0, 100,%, 50%, 0.5) 3. 영문으로 표현하는 방법 해당 방법은 영문으.. 2023. 5. 6.
[CSS] font-size 1. px vs rem 아래의 사진은 아래의 코드로 웹 페이지를 폰트 사이즈를 설정하고 웹 사이트의 폰트 사이즈를 변경했을 때 나타난 결과이다. [해당 사진의 결론] px는 폰트 사이즈가 고정되어 있지만 rem은 사용자의 설정에 따라서 폰트사이즈가 변경된다. px rem [rem과 폰트 사이즈의 관계] 1. 글꼴 크기: 아주 작게 - 1 rem = 9px - 2 rem = 18px - 3 rem = 27px 2. 글꼴 크기: 작게 - 1 rem = 12px - 2 rem = 24px - 3 rem = 36px 3. 글꼴 크기: 중간 - 1 rem = 16px - 2 rem = 32px - 3 rem = 48px 4. 글꼴 크기: 크게 - 1 rem = 20px - 2 rem = 40px - 3 rem =.. 2023. 5. 6.
[HTML] 시맨틱 태그와 div, span 1. 시맨틱 태그란? : 시맨틱 태그란 그 이름만 봐도 의미를 알 수 있는 태그를 의미한다. 왜 시맨틱 태그를 사용하는가❓ 1. 웹 브라우저가 HTML 소스코드만 보고도 어느 부분이 제목이고 메뉴이고 본문인지 쉽게 알 수 있다. 2. 문서 구조가 정확히 나누어지므로 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기 쉽다. 3. 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다. 헤더(header) 사이트 로고, 제목, 검색창, 사이트 메뉴를 삽입한다. 네비게이션(nav) 사이트의 메뉴들이 위치 nav 태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드바 안에 포함할 수 있고 독립해서 사용할 수도 있다. 메인(main) 사이트의 본문 내용 위치 메뉴, 사이드바, 로.. 2023. 5. 4.
[HTML] 자주 사용되는 HTML 태그정리2 - 표, 멀티미디어 1. 표 관련 태그 table: 표를 나타낸다 caption: 표의 제목을 넣는다. tr: 표의 행을 만든다. td: 표의 셀을 만든다. th: 제목 셀을 만든다. thead: 표 구조에서 제목 부분을 나타낸다. tbody: 표 구조에서 내용 부분을 나타낸다. tfoot: 표 구조에서 요약이나 정리 부분을 나타낸다. col: 표에서 열의 스타일을 지정한다. colgroup: 표에서 여러 열을 함께 묶어서 스타일을 지정한다. rowspan: 표에서 셀들을 행으로 합친다. colspan: 표에서 셀들을 열로 합친다. 셀의 내용 셀의 내용 코드 구조화 표 제목 /* 표의 제목 부분 */ /* 표의 행을 만든다. * 제목1 /* 제목 셀을 만든다. * 제목2 제목3 제목4 /* 표의 내용 부분 * 내용1.1 /.. 2023. 5. 4.
[HTML] 자주 사용되는 HTML 태그정리1 - 텍스트, 목록 1. hn 태그 주로 제목에 사용된다. ~까지 사용할 수 있으며 숫자가 커질 수록 글자 크기는 작아진다. 2. p 태그 테스트 단락, 내용이 길면 웹 브라우저 창의 너비에 맞게 자동으로 줄을 바꾼다. 3. br 태그 줄 바꾸는데 사용한다. 텍스트 단란 중 원하는 위치에서 줄을 바꾼다. [p태그와 br태그의 차이점] p태그는 단락을 나누면서 줄바꿈을 해주는 태그이고 br태그는 단순한 줄바꿈을 해주는 태그이다. 4. strong, b 태그 strong: 텍스트를 굵게 표시 + 강조의미 O b: 텍스트를 굵게 표시 + 강조의미 X 5. em, i 태그 em: 텍스트를 기울여서 표시 + 강조의미 O i: 텍스트를 기울여서 표시 + 강조의미 X 화면 낭독기에서 em은 강조해서 읽어준다. 6. sup, sub su.. 2023. 5. 4.
[CSS] 구조 가상 클래스 1. 특정 위치에 자식 요소 선택하기 :only-child 부모 안에 자식 요소가 하나뿐 일때 자식 요소를 선택한다. A:only-type-of 부모 안에 A 요소가 하나뿐일 때 선택한다. :first-child 부모 안에 있는 모든 요소 중에 첫 번째 자식 요소를 선택한다. :last-child 부모 안에 있는 모든 요소 중에 마지막 번째 자식 요소를 선택한다. A:first-of-type 부모 안에 있는 A 요소 중에서 첫 번째 자식 요소를 선택한다. A:last-of-type 부모 안에 있는 A 요소 중에서 마지막 번째 자식 요소를 선택한다. :nth-child(n) 부모 안에 있는 모든 요소 중에서 n 번째 자식 요소를 선택한다. :nth-last-child(n) 부모 안에 있는 모든 요소 중에서.. 2023. 5. 3.
[CSS] 속성 선택자 ❗️ {... }❗️ 1. 특정 속성이 있는 요소를 선택하는 [속성] 선택자 :속성값에 따라 원하는 요소를 선택하여 스타일을 지정할 때 사용 ❗️ a[속성]{... }❗️ 메인 메뉴 : 메뉴 1 메뉴 2 메뉴 3 메뉴 4 2. 특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자 : 주어진 속성값이 일치하는 요소를 찾아서 스타일을 지정할 때 사용 HTML CSS Selector Level 3 미디어쿼리 3. 여러 값중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성~=값] 선택자 :여러 속성값 중에서 해당 속성값이 포함된 요소를 선택하여 스타일을 지정한다. 메뉴 1 메뉴 2 메뉴 3 메뉴 4 4. 특정 속성값이 포함된 속성 요소를 선택하는 [속성 | 값] 선택자 : 특정 속성값이 포함된 속.. 2023. 5. 3.
[CSS] 연결 선택자 1. 하위(자손) 선택자 : 부모 요소에 포함된 하위 요소를 모두 선택한다. 즉, 자식요소뿐만 아니라 손자 요소, 손자의 손자 요소등 모든 하위 요소까지 적용된다. ❗️A B{ ...}❗️ HTML CSS JavaScript HTML CSS HTML2 CSS2 JavaScript ❗️{ ... }❗️ 3. 인접 형제 선택자 ❗️A+B{ ... }❗️ 예약 방법 & 이용 요금 아직 온라인 예약 신청이 준비되어 있지 않습니다. 전화(xxx-xxxx-xxxx)로 문의 바랍니다. 가족실(2~4인) : 60,000원/일 도미토리(4인 공용) : 25,000원/일 4. 형제 선택자 ❗️A~B{ ... }❗️ 예약 방법 & 이용 요금 아직 온라인 예약 신청이 준비되어 있지 않습니다. 전화(xxx-xxxx-xxxx).. 2023. 5. 3.
[CSS] 가상 클래스 선택자 가상 클래스 선택자 : 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있다. [사용자 동작에 반응하는 가상 클래스] 1. 방문하지 않은 링크에 스타일을 적용하는 link 2. 방문한 링크에 스타일을 적용하는 visited 3. 특정 요소에 마우스 포인터를 올려 놓으면 스타일을 적용하는 hover 4. 웹 요소를 활성화했을 때 스타일을 적용하는 active 5. 웹 요소에 초점을 맞추었을 때 스타입을 적용하는 focus 방문함 방문안함 [요소 상태에 따른 가상 클래스] 1. target : 같은 문서안에서 다른 위치로 이동할 때는 앵커를 이용한다. 이때 target 선택자를 사용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있다. 2... 2023. 5. 1.
[CSS]기본 선택자 1. 전체 선택자 : 문서의 모든 요소에 스타일을 적용한다 ❗️*{ ... }❗️ HTML CSS JavaScript 2. 태그(타입) 선택자 : 특정한 태그(타입)를 사용한 모든 요소에서 스타일을 적용한다. ❗️태그{ ... }❗️ HTML CSS JavaScript 3. 아이디 선택자 : 특정 부분만 선택해서 문서 안에서 한 번만 적용된다. ❗️#아이디{ ... }❗️ HTML CSS JavaScript 4. 클래스 선택자 : 특정 부분만 선택해서 문서안에 여러 번 적용한다. : id 선택자를 여러개 사용한 것과 같은 결과지만 클래스 선택자는 id 대신 class, # 대신 .을 사용한다. ❗️.클래스명{ ... }❗️ HTML CSS JavaScript 5. 그룹 선택자 ❗️A, B{ ... }❗️.. 2023. 4. 30.
[JavaScript] 행변환 prompt로 입력 받은 값은 문자형이다. 그렇기 때문에 숫자를 입력 받아도 90이 아닌 "90"이 된다. const mathScore = prompt("수학은 몇점인가요?"); // "90" const engScore = prompt("영어는 몇점인가요?"); // "60" const result = (mathScore + engScore) / 2; // "90" + "60" = "9060", "9060" / 2 = 4530 console.log(result); 여기서 "9060" / 2가 연산이 되었던 이유는 자동 행변환 덕분이다. 오류를 발생시킬 수 있기 때문에 자동으로 시스템에서 형변환을 시킨겄이다. 행변환은 아래의 3가지가 있다. 1. String() 괄호 안의 타입을 문자열로 변경해준다. 2... 2023. 4. 20.
[JavaScript] alert, prompt, confirm 1. alert alert: 알려줌 (사용자와 상호작용보다는 통보느낌) 2. prompt prompt: 입력을 받음 (사용자에게 어떤 값을 입력받아 값을 사용함.) const name = prompt("이름을 입력하세요."); alert("반갑습니다. " + name + "님!"); prompt는 아래와 같이 인수를 두개 입력해주면 기본 값을 미리 입력해 놓을 수도 있다. const name = prompt("이름을 입력하세요.", "홍길동"); alert("반갑습니다. " + name + "님!"); 3. confirm confirm: 확인을 받음 해당 confirm에 대한 답변은 boolean값으로 받을 수 있다. const isNice = confirm("반가우신가요??"); if (isNice =.. 2023. 4. 10.
[JavaScript] 자료형 https://www.youtube.com/watch?v=KF6t61yuPCY 1. 문자형 String 문자형은 아래와 같이 3가지 방식으로 작성할 수 있다. const name1 = "Mike"; const name2 = 'Mike'; const name3 = `Mike`; 만약 기호로 작은 따옴표(')를 사용하려면 큰 따옴표(")를 사용하던가 슬래쉬(\)와 함께 사용해야한다. const message1 = "I'm a boy."; const message2 = "I\'m a boy."; 2. 변하는 String 값 출력 선언한 상수 값을 String 값에 넣어서 출력하기 위해서는 `와 ${}를 사용해야한다. const name = "Mike"; const age = 30 const message1 =.. 2023. 4. 8.
[JavaScript] 변수 1. 변수 선언 아래와 같이 변수를 선언할 수 있다. 변수를 선언할 때는 ;를 마지막에 사용해주어야한다. name = "Mike"; age = 30; 2. 변수에 접근 alert() //경고창을 띄우는 함수 console.log //로그를 띄우는 함수 위의 사진과 같이 사용할 수 있다. ⚠️ 하지만 여러 사용자가 협업할 때 위와 같이 변수를 사용하는 것은 위험할 수 있다. 마지막에 선언된 변수의 값으로 적용될 수 있기 때문이다. ⚠️ 따라서 아래의 키워드를 사용해 해당 부분을 방지할 수 있다. 3. let, const let: 선언 후 다른 값으로 변경 가능한 값 const: 선언 후 다른 값으로 변경 불가능한 값 (상수라는 것을 알리기 위해서 대문자로 변수명을 작성하는 것이 좋다.) 4. 변수와 관련된.. 2023. 4. 8.

티스토리툴바