본문 바로가기

컴퓨터 사이언스138

[프론트엔드][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.
[프론트엔드][일반] vs code live server 열 때 제대로 작동을 안해요. vs code에서 html을 작성하면서 그 결과를 저장할 때마다 실시간으로 확인하고자 할 때, 다음과 같이 live server로 창을 열게 된다. 자습을 하려고 파일을 저장하고 live server로 열려고 하니, 이 화면이 똬앟... listing directory / ?????????? 왠 내 파일들이 뜨는 거지... 눌러보니 저 화면에서 파일들도 활성화되어 있어서 클릭하면, 저 폴더 안으로 들어가지고, 그 안에 파일도 열어진다. 이유를 알아보니, 현재 에디터에 열려있는 파일이 지금 열어놓은 폴더에 없어서였다. 내가 현재 열어놓은 작업 폴더는 왼편에 보이는 DAY12_0412_화 라는 폴더인데, 나는 에디터에서 새 파일을 만들어 놓고, 자습이라는 폴더에 지금 작업하는 파일을 넣어 열어놓은 폴더와 지.. 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.
[프론트엔트][CSS][HTML] TIL - Day 6 수업노트 끄적임 프로젝트를 할 때 기본 골격을 따라가는 것을 권장한다. 인라인 방식과 외부 호출 방식 인라인은 번거롭지만 스타일은 (일괄적으로 하지 않고 관련부분에) 한 줄 한 줄씩 넣어주는 것. 외부 호출 방식을 권장한다. -태그에 대면 mdn 사이트 팝업되는데 거기에 들어가서 나오는 코드 가져와서 사용해도 된다. css 스타일에서는 태그가 꺽쇠가 필요없이 이름만 부른다. 스타일이 길어지면 가독성이 떨어지므로 외부 호출방식이 바람직하겠다. d키(디스크립션)는 탭한 것과 같은 효과가 저절로 생긴다. fieldset은 쟁반역할을 함 안쪽 여백은 마진 바깥쪽 여백은 패딩이라고 한다. legend 그룹핑할 때 사용 caniuse ; 브라우저마다 지원되는 여러 내용들을 확인해 볼 수 있는 사이트 css 스타일에서는 동급의 경우.. 2022. 4. 4.

티스토리툴바