본문 바로가기

분류 전체보기182

[프론트엔드][일반] 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.
[프론트엔드][CSS][HTML] TIL -Day 5.2 익숙해지면 좋은 단축키들 1. Ctrl + End 어마무시한 길이의 소스의 그 끝을 알고 싶으시다면? 스크롤 다운으로도 그 곳에 도달할 수 있지만, 그 어느 곳에 있는 커서에서도 Ctrl + End를 누르면 소스의 맨 끝단으로 이동하게 된다. 2. 소스를 실행해보고자 할 때, ① F5키 ② alt + b 3. 저장 ctrl s Ctrl + Shift +s 다른 이름으로 저장하기 4. Ctrl + n 새문서 열기 5. Ctrl + Shift + 오른쪽 화살표 블록지정 live server란? !; HTML 기본 골격을 알아서 넣어준다. -emmet 자동완성기능 auto rename tag 앞의 태그를 수정하면 해당 태그의 닫는 태그도 같이 수정됨 단축키 ul>li*5 하위로 들어간다는 의미 li를 5번 반복할래 2022. 4. 3.

티스토리툴바