✔️ 터미널 이용 팁 (키보드)!

  • ⬆️ : 이전에 작성한 커맨드 입력
  • 커서 이동 :
  • (1) Ctrl + A : 가장 앞 부분 커서 이동
  • (2) Ctrl + E : 가장 뒷 부분 커서 이동
  • (3) Alt + ⬅️ / ➡️ : 단어 단위로 커서 이동
  • Ctrl + C : 실행하고 있는 작업취소 or 커맨드 입력중엔 취소 or 커맨드 실행되는 중에 누르면 작업취소
  • clear 커맨드 : clera을 누른 뒤 엔터 누르면 화면 깨끗해진다. 이전에 작성했던 커맨드 히스토리는 남아있다.
  • Tab(탭) : 지금 작성하고 있는 커맨드나 아규먼트를 자동완성 시켜준다.

🔊명령어

1. date : 현재 시간

2. cal (calendar 달력)

3. man (manual, 매뉴얼) : man 띄우고 검색해볼 커맨드를 아규먼트로 주면 된다.


  • ⬆️, ⬇️ : 한 줄씩 위아래로
  • space, f (forward) : 페이지 단위로 아래로 내린다.
  •  b (backward) : 페이지 단위로 올라간다.
  • q : 메뉴얼 페이지 나가기

  • NAME : 커맨드 이름, 커맨드의 역할 설명
  • SYNOPSIS : 사용할 수 있는 옵션과 아규먼트를 정리
  • [대괄호]로 감싸져 있다는건 필수가 아니고 옵셔널하다는 의미이다. (해당 옵션과 아규먼트를 써도 되고, 안써도 된다.)
  • 꼭 줘야 하는 아규먼트 들은 [대괄호]로 감싸져 있지 않다.
  • -(대시)가 붙은건 옵션이고 아닌것들은 아규먼트이다.
  • [[대괄호1] 대괄호2] : 대괄호1과 대괄호2 라는 아규먼트를 줘도 되는데 아규먼트를 하나만 입력하면 그건 대괄호1이 아닌 대괄호 2에 대한 아규먼트로 인식된다. 아규먼트를 줄 때 대괄호 1은 옵셔널하기 때문이다.
  • DESCRIPTION : 일반적인 설명(윗줄) + 각 옵션에 대한 설명 (아랫줄) + 커맨드에 대한 자세한 설명, 유의사항 등
  • SEE ALSO : 해당 커맨드와 비슷한 커맨드들
  • HITSTORY, AUTHORS, BUGS : 참고할만한 정보들

cal의 man

4. pwd (Print Working Directory) : 현재 위치해 있는 디렉토리(working directory)를 출력(print)

pwd로 확인해보니 현재 위치는 root이다.

5. cd (Change Directory) : 다른 디렉토리로 이동

$ cd : 홈 디렉토리로 이동
$ cd ~ : 홈 디렉토리로 이동

$ cd .. : 현재 위치의 상위 디렉토리로 이동

$ cd /Users/username/Documents : 특정 디렉토리로 이동

6. ls (List) : 디렉토리 안에 무엇이 있는지 알려준다. 

$ ls : 현재 디렉토리의 목록

$ ls -l : 자세한 정보를 추가하여 목록을 보여준다. Long format

$ ls -a : 숨겨진 파일을 포함해서 목록을 보여준다. ALL

$ ls -al : 숨겨진 파일 + 자세한 정보

$ ls /Users/username/Documents : 지정된 디렉토리의 목록을 보여준다.

 

'코린이 개념잡기 > 유닉스 커맨드' 카테고리의 다른 글

필수 디렉토리  (1) 2024.12.07
디렉토리 구조와 파일 경로  (1) 2024.12.07
아규먼트(argument) 와 옵션(option)  (0) 2024.12.04
터미널과 shell  (1) 2024.12.04
커맨드란?  (1) 2024.12.04

시멘틱 태그(sementic tag)

  • <div> 태그의 기능과 마찬가지로 블록속성(block element)이며 사이트의 구조(레이아웃, layout)을 설계하기 위한 태그.
  • HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그.

시멘틱 태그(sementic tag)의 종류

  • <header> : 머리글, 제목
  • <nav> : navigation, 네비게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현.
  • <aside>:좌측과 우측 사이드 위치의 공간을 의미, 본문 외의 부수적인 내용을 주로 표현.
  • <section> : 주제별, 카테고리 별로 구분하는 용도로 태그를 사용. 같은 테마를 가진 여러개의 콘텐츠를 그룹화한다.
  • <article> : 기사, 블로그 등 텍스트 위주의 페이지를 구성할 때 주로 사용
  • <footer> : 바닥글, 꼬리말, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그
  • <address> : 콘텐츠 작성자나 사이트 소유자의 정보 등을 부가적으로 담는 태그
  • <main> : 문서 <body>의 중심 주제, 주요 내용 혹은 응용 프로그램의 중심 기능과 직접 관련되거나 확장되는 콘텐츠를 나타낸다.
  • <figure> : 이미지, 다이어그램, 사진 등 독립적인 콘텐츠 정의 시 사용
  • <hgroup> 제목과 관련된 부제목을 묶는 태그
  • <details> 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타낸다.
  • <figcaption> <figure> 요소의 설명 캔션(caption) 정의
  • <mark> 현재 맥락에 관련이 깊거나 중요한 부분 강조
  • <time> 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현
  • <summary> details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힌다.

 

시멘틱 태그(sementic tag)의 장점

 SEO 최적화에 유리(Search Engine Optimization) : 검색엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색결과의 노출에 유리할 수 있게 해준다.

 웹 접근성에 효율적 : 스크린 리더기(시각장애인을 위한 웹서핑 프로그램)와 같은 환경에서는 웹 접근성과 사용성을 향상 시켜준다.

 유지보수의 용이성 : 많은 div 사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능, 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이하다.

'코린이 개념잡기 > HTML' 카테고리의 다른 글

수업으로 만든 사이트 배포해보기  (1) 2024.11.28
HTML 속성 class, id  (0) 2023.03.12
라벨링  (0) 2023.03.12
<form> : 서식  (0) 2023.03.12
<table> : 테이블(표, 항목)  (0) 2023.03.12

"Cascading"이라는 용어는 여러 분야에서 사용되지만, 일반적으로 "연속적으로 일어나는" 또는 "연쇄적인" 의미이다.

알아볼 cascading은 스타일 시트 언어, CSS(Cascading Style Sheet)에 들어가는 cascading이다.

여기서 Cascading이란 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 것을 의미한다. 즉, 웹 문서의 요소에 스타일을 적용할 때 우선순위를 두고 적용된다는 의미이다.

그 우선순위엔 결정하는데엔 판단기준이 있다.

  1. 중요도
  2. 명시도
  3. 코드의 순서
  4. 상속

중요도 importance

중요도는 스타일이 선언된 사람(위치)에 따라서 우선순위를 메기는 것이다. 작성자(author), 사용자(user), 사용자 도구(user agent, 브라우저가 대표적)가 작성한 세 종류로 나뉘는데

  1. 작성자(author) 스타일 시트
  2. 사용자(user) 스타일 시트
  3. 사용자도구(user agent) 스타일 시트

순서로 작성자 스타일시트가 제일 우선순위가 높다.

1. !important : 최우선 순위로 적용되는 스타일, 명시도와 무관하지만, 명시도에 직접 영향을 미치고 다른 선언보다 우선한다.
2. 인라인 스타일 : 특정 태그 안에 'style' 속성을 이용해 부여된 스타일, 
   인라인 스타일은 항상 외부 스타일시트의 모든 스타일을 덮어쓰기 때문에 가장 높은 명시도를 갖는다.

**!important 는 가능한 사용하지 말자. (스타일 디버깅을 어렵게 한다)
**인라인 스타일 정의도 가능한 사용하지 말자. (스타일 디버깅을 어렵게 한다)

명시도 specificity

만약 중요도가 같을 경우 스타일은 적용범위의 영향을 받게 된다. 스타일의 적용범위가 좁을수록 우선순위는 높다.

  1. 인라인 스타일 : HTML요소의 style 속성을 통해 직접 지정된 스타일. 가장 높은 명시도를 갖는다.
  2. ID 선택자: #id 형식으로 정의된 선택자는 문서 내에서 한 번만 사용할 수 있으므로 비교적 좁은 범위를 가지게 된다.
  3. 클래스 선택자, 속성 선택자, 가상(pseudo)클래스 선택자 : .class 형식으로 정의된 선택자는 ID 선택자보다 낮은 명시도를 갖는다.
  4. 태그 선택자, 가상((psuedo)) 요소: div, p 등과 같은 태그 선택자로 문서 내 모든 태그를 가리키기 때문에 범위가 제일 넓고, 가장 낮은 명시도를 갖는다.

명시도는 점수화해서 계산을 할 수 있는데, 각 선택자 유형에 따라 점수로 계산된다.

인라인 스타일: 1,0,0,0
ID 선택자: 0,1,0,0
클래스 선택자: 0,0,1,0
태그 선택자: 0,0,0,1

명시도는 id 개수, class 개수, tag 개수로 결정되며, (id 개수, class 개수, tag 개수) 형태로 표시되는데, 앞에 있는 숫자가 클수록 명시도 점수가 높고 cascading 우선순위가 높다.


코드의 순서

같은 명시도를 가진 여러 스타일 규칙이 있을 경우, 나중에 선언된 스타일이 우선 적용된다. 즉, CSS 파일 내에서 아래쪽에 위치한 스타일이 위쪽에 위치한 스타일보다 우선적으로 적용된다.


상속

상속은 부모 요소의 특정 CSS 속성이 자식 요소에 전달되는 것이다. 조상 태그들에서 스타일이 모두 계산된 상태에서 우선순위를 따지는데, 가까운 조상에게 물려받은 속성일수록 우선순위가 높다. 

부모 요소에 설정된 글꼴이나 텍스트 색상은 자식 요소에 자동으로 적용되는데 모든 CSS 속성이 상속되는 것은 아니고, 일부 속성만 상속된다.

상속되는 속성

  • 폰트 관련 속성: font-family, font-size, font-style, font-weight, line-height
  • 텍스트 관련 속성: color, text-align, text-indent, text-transform
  • 리스트 스타일: list-style, list-style-type, list-style-position

상속되지 않는 속성

  • margin, padding, border, width, height 등

'코린이 개념잡기 > CSS' 카테고리의 다른 글

grid  (0) 2024.12.03
position 속성  (0) 2024.12.03
flex box  (0) 2024.12.02
BOX Model  (0) 2024.12.01
전체 선택자  (0) 2024.11.29

+ Recent posts