본문 바로가기

컴퓨터 사이언스/TIL 정리85

[프론트엔드][CSS] TIL Day-14.2 Media Queries 미디어 쿼리 미디어 쿼리(media queries)는 접속하는 장치 즉, 미디어에 따라 사이트의 형태가 바뀌도록 같은 스타일시트 내에서 서로 다른 미디어에 다른 스타일을 적용하도록 지정하게 하는 것을 가리킨다. 이를 위해 CSS2에서 도입된 미디어 타입을 이용하면 @media 규칙을 통해 다양한 미디어 유형에 맞춰 서로 다른 스타일을 지정할 수 있었다. CSS2의 미디어 타입을 확장한 CSS3의 미디어 쿼리는 단지 미디어 타입을 지정하는 것 뿐만 아니라 뷰포트의 크기(폭, 높이), 장치의 크기, 화면의 가로/세로 방향, 해상도 등 미디어 타입의 특성을 구분할 수 있는 다양한 기능을 이용할 수 있게 되었다. 그럼으로써, CSS3의 미디어 쿼리는 반응형 웹을 구현하는 중요한 기능으로 사용되게 되었다. 미디어 쿼리의 문법.. 2022. 4. 15.
[프론트엔드][CSS] TIL Day-14.1 이미지를 가운데로 정렬하여 넣는 법 그리드를 연습하던 중, 주어진 소스로 만들어진 그리드의 각 박스 안의 이미지를 가운데로 정렬하고 싶다는 생각이 들었다. 이미지를 가운데로 정렬하는 방법은 다음 두 가지가 있다. 첫번째는, 이미지 요소 위의 부모요소에 스타일을 주는 방법이다. 아래의 경우와 같이, css에서 img요소의 부모요소인 figure에 text-align 속성에서 center 값을 주는 것이다. ↓ 혹은 figure 태그 안에서 바로 스타일을 줄 수 있지만, 이럴 경우 해당 태그만 스타일링이 되므로 여러개에 동일하게 스타일링을 한다면 위와 같이 css에서 스타일을 주는게 좋겠다. ↓ 두번째는, 아래와 같이 img 요소를 블록으로 지정한 뒤, margin 속성을 사용하여 0 auto라는 값을 주는 것이다. 이 때, 0은 상하의 값이.. 2022. 4. 14.
[프론트엔드][CSS] TIL Day-13.1 Flex 플렉스(Flexible Box layout) CSS Flexbox는 기존의 float, position, display 속성을 사용해 HTML 요소의 배치, 정렬, 방향, 순서, 크기를 조절하는 대신에 좀 더 쉽고 효율적으로 조절할 수 있도록 하는 CSS3 레이아웃 제작 방식이다. ∨ 사용해서 좋은 점? - float속성을 사용하지 않고 가로배치할 수 있다. - 반응형 레이아웃을 만들기 쉽다. - 자식요소의 위치 잡기를 훨씬 쉽게 할 수 있다. - 브라우저에 보여지는 HTML 요소의 순서를 HTML 코드를 수정하지 않고 바꾸는 게 가능하다. 문서의 영역 중에서 Flexbox가 놓여있는 영역을 Flex 컨테이너(container)라고 한다. Flex 컨테이너를 생성하려면 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정한.. 2022. 4. 13.
[프론트엔드][CSS] TIL -Day 12.1 position 포지션 & border 보더 종류 설명 static 따로 설정하지 않았을 때의 배치와 같다. 즉, 기본값 relative 위치값을 지정할 수 있다는 점 외에는 static과 같다. absolute relative값을 가지고 있는 상위 요소를 기준으로 위치를 지정해 배치한다. fixed 브라우저 창을 기준으로 위치를 지정해 배치한다. 코드를 참고하면서 위의 실행화면을 보면, 첫번째 더미박스와 두번째 더미박스는 각각 static과 relative를 사용해서 웹 문서의 흐름에 따라 요소가 위에서 아래로 자연스럽게 배치된다. 세번째 더미박스는 relative로 설정하였으므로, 왼쪽과 위쪽으로 위치 변화를 줄 때 움직임이 생김을 알 수 있다. 단, 좌측과 상단으로의 변화가 생기지만, 그것은 이전의 박스를 기준으로 한 상대적인 변화가 아니라 .. 2022. 4. 12.
[프론트엔드][CSS] TIL -Day 11.2 특수기호의 영어표현 퍼블리싱 작업에서 필요한 특수기호의 영어표현 기호 영어 기호 영어 ~ Tilde /틸드/ (물결표시) ] Right Square Bracket /롸이트 스퀘어 브래킷/ (오른쪽 대괄호) ! Exclamation mark /엑스클러메이션 마크 (느낌표) { Left Brace /레프트 브레이스/ (왼쪽 중괄호) @ At sign /앳 싸인/ (골뱅이) } Right Brace /롸이트 브레이스/ (오른쪽 중괄호) # Sharp, Hashtag /샵, 해쉬태그/ (우물정) ; Semicolon /쎄미콜런/ (쌍반점, 머무름표) % Percent sign /퍼센트 싸인/ (퍼센트) : Colon /콜런/ (쌍점, 그침표) ^ Caret, Circumflex /케럿, 썰컴플렉스/ (삿갓, 누승) ' Quotat.. 2022. 4. 11.
[프론트엔드][CSS] TIL -Day 11.1 @-규칙 @-규칙 @-규칙은 식별자(identifier)가 뒤따르는 at 기호('@')로 시작하는 CSS문이며 다음 세미콜론(';') 또는 다음 CSS 블록 중 먼저 오는 쪽까지의 모든 것을 포함하는 범위 안에서 적용된다. CSS at-규칙 특징 예시 예시의 의미 중첩 명령문이 아님 ㅡ 조건부 그룹 @규칙 내에서 사용할 수 없음 @charset 스타일 시트에 쓰이는 문자 인코딩을 지정, 스타일 시트의 첫 번째 요소여야 함, 여러 @charset이 정의된 경우 첫 번째 것만 사용되고, 요소 내에서 사용될 수 없음 @charset "utf-8"; 브라우저에게 utf-8 character set을 사용한다고 알려라. @import 다른 스타일 시트에서 스타일 규칙을 가져올 때 사용, CSS 엔진에게 외부 스타일 시트를.. 2022. 4. 11.
[프론트엔드][일반]TIL -Day 10.1 깃 설치하기 1 1. 깃 설치(다운로드)하러 가기 https://git-scm.com/ Git git-scm.com 2. Visual Studio Code ① 터미널 탭>새 터미널로 밑에 새 터미널 창을 연다. ② ctrl + ` 키를 눌러 아래에 새 터미널 창을 염 3. VSC는 기본적으로 터미널이 powershell로 되어 있기 때문에 (git)bash로 바꾼다. ① ctrl + shift + p 눌러 창이 뜨면 Select Default Profile로 검색해 선택한다. ② 그러면 뜨는 여러 옵션 중에 Git Bash를 선택한다. ③ 터미널 창에서 오른쪽 하단에 +를 bash를 선택한다. 그러면 깃배쉬와 같은 터미널이 열린다. * 이렇게 터미널에 깃배쉬를 연결해 놓음으로써 리눅스 명령어를 윈도우에서 편하게 사용할 .. 2022. 4. 8.
[프론트엔드][CSS] TIL -Day8 CSS 선택자(Selectors) 종류 형태 사용 예 사용 예의 내용 전체 선택자 * * { } 문서 전체에 효과를 줌 타입 선택자 태그 이름만 p(꺽쇠없이 p태그 이름만) { } p태그에 효과를 줌 아이디 선택자 # 아이디 이름 #students(작성자가 설정한 id이름) { } 무슨 태그에 있던 students라는 id이름 붙여진 것에 효과를 줌 클래스 선택자 . 클래스 이름 .teacher(작성자가 설정한 class이름) { } teacher이라는 class이름이 붙여진 클래스에 효과를 줌 속성 선택자 선택자[속성 =값] a[title = "food"] a태그에 title 속성의 속성값이 딱 food인 것을 선택해 효과를 줌 선택자[속성 ~=값] a[title ~= "food"] a태그에 title 속성의 속성값이 food이거나 앞.. 2022. 4. 6.
[프론트엔트][CSS] TIL - Day 7 폰트 사이즈, 인라인 형식 vs 블록 형식 ▶ em은 16px이 1.0em임을 기준으로 하여 상대적인 크기를 나타낸 폰트(글꼴)의 단위이다. (※em태그 를 이야기하는 것이 아니다.) ▶ rem은 root(뿌리)의 em을 의미하며 뿌리라 함은 (최종)부모의 크기를 기준하여 나타내는 상대적인 크기이다. 그 크기가 따로 명시되어 있지 않다면 rem 또한 기본값 16px이다. ▶ 표에서는 px(픽셀)과 em(엠), %(퍼센티지), pt(포인트)의 크기 관계를 살펴볼 수 있다. ▶일반적으로 웹에서는 px 단위를 사용한다. 는 블록 형식으로 한 줄을 다 사용해서 그 뒤에 무엇을 작성하려고 해도 작성이 안 된다. → 블록형 태그는, ˙크기값을 지정할 수 있다. ˙한줄에 하나만 배치된다. ˙상하좌우 마진 모두를 가진다. ˙기본 너비값은 100%이다. ˙종류;.. 2022. 4. 5.

티스토리툴바