본문 바로가기

분류 전체보기640

[CSS] flex 1. flex flex를 사용하기 위해서는 아래의 두 단계 코드가 있어야한다. container와 item이라는 태그가 있는 것이 아니고 해당 역할을 하는 부모, 자식 태그가 있어야한다는 의미이다. container와 item에 부여해야하는 속성 container item 속성 display order flex-direction flex-grow flex-wrap flex-shrink flex-flow flex-basis justify-content flex align-items align-self align-content display: flex; flex를 사용하기 위해서는 바깥쪽에 있는 container에 display: flex;를 작성해주어야한다. flex-direction flex-direct.. 2023. 5. 10.
[CSS] position position이란 태그들이 화면상에 어디에 위치할 것인가를 결정하는 것 1. offset 종류 설명 left 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨저져 있는지 지정한다. right 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨저져 있는지 지정한다. top 기준 위치와 요소 사이에 위쪽으로 얼마나 떨저져 있는지 지정한다. bottom 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨저져 있는지 지정한다. 2. position 종류 설명 static 문서의 흐름에 맞춰 배치한다. 기본값이다. relative 위칫값을 지정할 수 있다는 점을 제외하면 static과 같다. absolute relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다. fixed 브라우저 창을 기준으로 위치를 배치한.. 2023. 5. 9.
[CSS] margin 겹침 1. 마진겹침(h1끼리) 아래의 코드로 작성하고 살펴보면 아래의 이미지와 같은 주황색부분(마진)이 겹치는 현상이 나타나는데 이것을 마진겹침이라고 한다. hello world! hello world! 이상적으로는 첫번째 hello world!와 두번째 hello world! 사이의 간격이 100px이어야한다. 하지만 위의 이미지를 보면 100px로 설정되어 있다. 왜그럴까? 마진은 위 아래로 마진이 서로 만날때 첫번째 hello world!의 마진값과 두번째 hello world! 의 마진 값중 큰 값으로 합쳐진다. 이렇게 된 이유는 여러 요소를 세로로 배치할 때 맨위의 마진과 아래의 마진에 비해 중간에 있는 마진이 지나치게 커지는 것을 방지하기 위함이다. 2. 마진겹침(부모와 자식) hello world.. 2023. 5. 9.
[CSS] box-sizing 1. box-sizing이란 width와 height는 기본적으로 콘텐츠 영역을 기준으로 설정이된다. 즉, 마진, 패딩, 테두리가 얼마인지와 상관없이 width와 height는 콘텐츠 영역에만 적용이 된다. box-sizing 적용 전 사진을 보면 콘텐츠 영역을 기준으로 width가 적용되어 small과 large의 width가 다르게 보인다. (콘텐츠 영역의 width만 적용되었기 때문이다.) 이 문제를 해결하기 위해서는 box-sizing을 사용해야한다. box-sizing: border-box를 설정한다면 테두리가 기준이 되어 width를 적용받게 된다. 따라서 아래의 사진을 보면 small과 large의 width가 같게 보인다. /* 적용 전 */ hello hello /* 적용 후 */ hel.. 2023. 5. 8.
[CSS] box-model ⭐️⭐️⭐️ 박스모델이란? : 모든 HTML요소는 박스(box)모양으로 구성되며, 이것을 box-model이라고 한다. : 웹 문서 안에서 여러 요소를 원하는 위치에 배치하려면 CSS 박스모델을 잘 알고 있어야한다. 박스 모델의 기본 구성 콘텐츠 영역(content): 텍스트나 이미지가 들어 있는 박스의 실질적인 부분 패딩(padding): 내용과 테두리 사이의 간격, 눈에 보이지 않는다. 테두리(border): 내용과 패딩 주변을 감싸는 테두리 마진(margin): 테두리와 이웃하는 요소사이의 간격 2023. 5. 8.
[CSS] inline-level, block-level inline-level과 block-level inline-level: 콘텐츠만큼만 영역을 차지하는 것 (코딩) block-level: 혼자 한줄을 다 차지하는 것 (hello world!) 이렇게 항상 고정되어있냐? 그건 아니다 아래의 방법으로 level을 변경시킬 수 있다. 2023. 5. 8.
[CSS] Emment 단축키 1. HTML 표준문서 생성 "!"치고 "tab" 또는 HTML 입력후 HTML5 선택 2. 하위 요소 생성(>) 3. 동급 요소 생성(+) 4. 반복 태그 생성(*) 5. class와 id 설정(.)(#) 6. 그룹화(()) 7. 속성 [attribute]있는 태그 ([]) 8. 텍스트가 있는 태그({}) 9. 넘버링($) https://www.hanl.tech/blog/emmet-%EB%8B%A8%EC%B6%95%ED%82%A4-%EB%B0%8F-%ED%8A%B8%EB%A6%AD-9%EA%B0%80%EC%A7%80/ 2023. 5. 8.
[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.

티스토리툴바