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

  • ⬆️ : 이전에 작성한 커맨드 입력
  • 커서 이동 :
  • (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

커맨드에서는 아규먼트를 줄 수도 있고 옵션을 줄 수도 있다.

Argument(인자) : 어느 대상에 대해 커맨드를 실행할지 정해주는 것

Option(옵션) : 커맨드가 실행되는 방식을 바꾸는 것. -(대시)와 특정 알파벳을 입력하면 된고 동시에 여러 옵션을 사용할 땐 붙여서 사용하면 된다.

cal -j 2024

cal :커맨드
-j :옵션
2024 :아규먼트

cal 커맨드를 j(날짜 대신 1월1일을 기준으로 몇번째 날인지 보여주는 옵션)라는 옵션을 써서 2024년도에 대해 실행한 것이다.
  • 옵션커맨드를 어떻게 실행할지 정하는 것 
  • 아규먼트커맨드의 대상 이라고 생각하면 쉽다.

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

필수 디렉토리  (1) 2024.12.07
디렉토리 구조와 파일 경로  (1) 2024.12.07
🔊명령어  (0) 2024.12.07
터미널과 shell  (1) 2024.12.04
커맨드란?  (1) 2024.12.04

터미널 : 인풋을 받고 아웃풋을 출력해주는 프로그램을 뜻한다. 보통생각하는 커맨드를 입력하는 '검은 화면'을 터미널이라고 할 수 있다.

shell : 커맨드를 해석해 주는 프로그램. 컴퓨터는 date같은 단어를 이해하지 못한다. 그래서 이런 커맨드를 컴퓨터가 이해할 수 있는 형태로 바꿔줘야 하는데 이것이 shell의 역할이다. shell이 date같은 커맨드를 컴퓨터가 이해할 수 있는 형태로 바꿔 전달해 주면,  컴퓨터가 실제로 커맨드를 '실행'하고 결과를 되돌려 주는 것이다.

shell은 여러 종류가 있고 종류에 따라 커맨드를 작성하는 방식이나 제공하는 인터페이스가 조금은 다를 수 있지만 대부분의 경우 아주 비슷하거나 똑같이 작동하기 때문에 크게 상관은 없다.

bash : shell의 한 종류로  Bourne agin shell이라고 부른다. 가장 보편적이고 많은 유닉스 운영 체제에서 기본 shell로 사용된다.

아무튼, shell과 터미널은 엄밀히 말하면 서로 다르지만, 커맨드를 입력하는 '검은 화면'을 그냥 shell이라고 부르는 경우도 많다.

 

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

필수 디렉토리  (1) 2024.12.07
디렉토리 구조와 파일 경로  (1) 2024.12.07
🔊명령어  (0) 2024.12.07
아규먼트(argument) 와 옵션(option)  (0) 2024.12.04
커맨드란?  (1) 2024.12.04

컴퓨터의 검은 창에서 복잡해 보이는 글자들을 두드리는걸 커맨드(Command) 혹은 명령어라고한다.

커맨드를 통해 컴퓨터를 사용하는 방식을 Command Line Interface 혹은 줄여서 Command Line이라고 한다.

보통 화면과 마우스를 이용해서 컴퓨터를 사용하는 방식은 GUI(Graphical User Interface)라고 한다.

개발을 할 때는 많은 작업을 Command Line에서 한다. 예를들어

  1. 필요한 라이브러리 파일을 다운로드 받고 설치하는 것
  2. 협업시 코드관리
  3. 웹 개발을 할 때 환경 설정과 서버 실행

등이 있다. 커맨드로 어떤작업을 하고 싶은지 명확하게 한 줄로 이야기 할 수 있기 때문에 마우스와 클릭보다 선호된다.

커맨드 라인을 배워야 하는 이유? 개발을 하면 무조건 커맨드 라인을 마주치게 되는데 개발자가 되어 진지하게 일을 하고 싶다면 꼭 필요한 스킬이라고 할 수 있다.

유닉스(UNIX)

-1970년대 초반에 개발된 운영 체제

  • 소프트웨어를 개발하고 실행할 수 있는 편리한 플랫폼
  • 쉽게 수정해서 다른 컴퓨터에 적용할 수 있었다.
  • 유닉스를 기반으로 하는 다양한 운영체제 탄생

쉽게 접하는 macOS, 리눅스, 우분투 등 윈도우를 제외한 모든 운영체제는 유닉스에서 파생됐다. 유닉스 운영체제들은 출발지가 똑같기 때문에 사용하는 커맨드가 거의 비슷하다. 이런 커맨드를 유닉스 커맨드(UNIX Command)라고 부른다.

윈도우에도 따로 윈도우에서 사용하는 커맨드(윈도우 커맨드)가 있지만 개발에서는 유닉스 커맨드가 보편적으로 사용되기 때문에 유닉스 커맨드 사용을 권장한다.

웹사이트를 인터넷에 올리는 것을 웹사이트 배포라고 하는데 배포 과정에서 유닉스 커맨드가 자주 사용되고, 인공지능 프로그램을 개발할 때 개인 컴퓨터보단 파워풀한 서버 컴퓨터를 이용하는데 서버컴퓨터를 사용할 때도 유닉스 커맨드가 자주 사용된다. 

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

필수 디렉토리  (1) 2024.12.07
디렉토리 구조와 파일 경로  (1) 2024.12.07
🔊명령어  (0) 2024.12.07
아규먼트(argument) 와 옵션(option)  (0) 2024.12.04
터미널과 shell  (1) 2024.12.04

CSS의 box 모델이란 무엇이고 각 요소의 역할은 무엇인가?

css 박스 모델은 모든 HTML요소가 박스 형태로 렌더링 된다고 생각하면 됩니다.

더보기

렌더링(Rendering) : 웹 브라우저에서 웹 페이지를 실시간으로 그려내는 과정

박스모델은 요소의 크기와 배치, 여백을 이해하는데 중요합니다.
박스 모델은 네가지의 구성 요소로 이루어져 있는데 

  1. content (내용)
  2. padding (패딩, 내부여백)
  3. border (테두리)
  4. magin (마진, 외부여백)

으로 이루어져 있습니다.

  • content : 요소의 실제 콘텐츠가 위치하는 영역, 너비와 높이를 지정할 수 있다.
  • padding : 콘텐츠와 테두리(border) 사이의 공간으로 콘텐츠와 테두리 간의 거리를 조정 가능
  • border : 요소의 경계, 콘텐츠와 패딩을 감싸는 선
  • margin : 요소의 외부 여백으로 다른 요소와의 간격 조정 가능


박스 모델이 중요한 이유?

요소의 레이아웃을 더 잘 조정할 수 있기 때문입니다. 레이아웃을 효과적으로 구성하고 의도한 대로 사용자 경험을 개선할 수 있기 때문에 css의 핵심 개념이라고 볼 수 있습니다.

여담

box--sizing : border-box를 하면 박스모델의 어디를 기준으로 크기를 정하게 되는지 알고 있나요?
border를 기준으로 크기를 정합니다. margin을 제외한 박스모델 전체를 너비와 높이의 대상 영역으로 지정할 수 있습니다.
border-box를 지정하지 않으면 기본값은 content-box을 갖는데, 이 때는 border와 padding을 제외한 content 영역만 너비, 높이를 적용시킬 수 있습니다.

content-box 값일 때
border-box 값일 때

 

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

position 속성  (0) 2024.12.03
flex box  (0) 2024.12.02
전체 선택자  (0) 2024.11.29
마진 상쇄(margin collapsing)  (1) 2024.11.29
미디어 쿼리(media query)  (0) 2024.02.09

+ Recent posts