Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

나를 위한 기록

231005/D+2 본문

Today I Learned

231005/D+2

솔솔이소리솔 2023. 10. 5. 10:02

cd로 현재 작업 중인 폴더 이동시 폴더명에 띄어쓰기가 있는 경우

 

1. cd "이동할 폴더 이름" <- 따옴표 사용

2. cd 이동할/폴더/이름<- 역슬래시 사용.

파일생성 <touch>, <cat>

파일 삭제 <rm>

*옵션

-f: 강제 삭제

-i: 삭제 전 물어봄

-r: 하위 디렉토리 파일까지 삭제

-v: 지우는 파일 정보 출력

 

폴더 삭제: -r 옵션을 붙인다. (ex. rm -r 폴더명)

 rm -r * : 현재 디렉토리에 속한 모든 파일과 디렉토리를 삭제. -rf 옵션은 주의해서 사용

 

href안에서 #의 의미

하이퍼링크 안에 있는 hash(#)는 윈도우창이 스크롤 되어야 할 위치에 있는 html 요소의 id를 특정한다.

href="#some-id" 현재 페이지에 있는 <div id="some-id"> 와 같은 요소의 위치로 스크롤 된다.

href="//site.com/#some-id"는 site.com이라는 곳으로이동하고 some-id의 위치로 스크롤 된다.

href="#"과 같이 id가 특정되지 않아서 상응하는 위치가 없다면, 그 페이지의 top(스크롤 위치 상 위)에 해당된다.

href="#"인 a 태그를 클릭한다면, 스크롤 위치상 위로 이동한다.

 

opacity property

opacity는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않는다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖는다.

opacity 값이 1이 아니면 요소를 새로운 쌓임 맥락에 배치.

자식 요소는 불투명하게 유지하고 싶다면 background 속성을 대신 사용.

 

참고

https://developer.mozilla.org/ko/docs/Web/CSS/opacity

 

position 속성

1. static: 기본값. 일반적인 문서 흐름에 따라 요소 배치.

2.relative: 일반적 흐름에 따라 배치하되, 상하좌우 offset 적용할 수 있음

3. absolute: 일반적 문서 흐름에서 배제되고, 가장 가까운 position요소에 대해 상대적 offset을 적용하는 옵션

4. fixed: 일반적 문서 흐름에서 배제되고, 지정하는 위치에 고정.

5. sticky: 일반적 문서 흐름에서 배제되고, 스크롤되는 가장 가까운 요소에 offset 적용.

 

* relative 예시

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
    .box {
         display: inline-block;
         width: 100px;
         height: 100px;
         background-color: green;
         color: white;
    }
    #one, #two {
        position: relative;
        top: 15px;
        left: 15px;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="box" id="one">One</div>
    <div class="box" id="tow">Two</div>
    <div class="box" id="three">Three</div>
    <div class="box" id="four">four</div>
</body>

>>'#one, #two는 원래 위치보다 위에서 15px, 왼쪽에서 15px 떨어져라'

 

*absolute 예시

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.relative {
            position: relative;
            width: 500px;
            height: 300px;

            border: 5px solid blue;
        }
        div.absolute {
            position: absolute;
            left: 100px;
            top: 0;
            width: 150px;
            height: 130px;
            border: 6px solid red;
        }
    </style>
 <body>
     <div class="relative">relative
         <div class="absolute">absolute</div>
     </div>
</body>

>>'가장 가까운 조상으로 부터 왼쪽에서 100px, 위에서 0px 떨어져라.  '

따라서 absolute는 relative로부터 왼쪽에서 100px, 탑에는 딱 붙어있게 됨.

만일 absolute가 아니라 relative였다면 문서의 흐름에서 제외되므로 파란색 박스 안의 relative 글씨영역 아래 위치하게 됨.

 

참고 https://nonipc.com/entry/CSS-position-relative-%EC%99%80-absolute-%EC%B0%A8%EC%9D%B4

 

java script / this

Dot Notation: Object를 만들고 그 Object의 key와 value를 부여한 후 도트(.)로 값에 접근하는 방식.

ken이라는 변수에 Object 생성. 
var age = 100;

var ken = {
    age: 35,
    foo: function () {
    console.log(this.age); // 35
    }
}
ken.foo();

그리고 foo라는 key에 this.age를 출력하는 함수 생성.

ken.foo();라고 함수를 실행시 위와 같이 도트를 사용하여 객체 속성의 값에 접근하는 방식을 Dot Notation이라고 한다.

 

Dot Notation으로 함수가 실행되면, this는 그 도트 앞에 써있는 객체 자체를 가리킨다.

위 코드에서 this.age의 this는 ken을 가리킨다.

그러므로 this.age는 ken.age와 같기 때문에 35가 출력된다.

 

출처 https://im-developer.tistory.com/96

 

font 적용/ font size

특정 부분만 font 적용할 경우

 

1. html에 폰트연결

2. css에서 font-family 적용!

 

font-size: px값 입력!

 

css 복합선택자/다중선택자/ class명 띄어쓰기

- tag 선택자 / class 선택자 /id 선택자 / 복합 선택자 / 다중선택자 / Pseudo class (가상클래스) / 속성 선택자 / 구조 선택자 / 부정 선택자/ 가상요소 등....

복합 선택자

  • 하위 선택자: 부모요소를 포함한 '모든' 하위요소에 적용. 띄어쓰기로 구분 (ex. section ul {}  -> section아래에 있는 모든 ul에 적용)
  • 자식 선택자: 부모의 바로 아래의 자식 요소에만 적용. '>'사용(ex. section > ul {} -> section 바로 아래의 ul에 적용)
  • 인접 형제 선택자:  E + F {}  같은 부모를 가지고 E 바로 뒤에 오는 F에만 적용
  • 일반 형제 선택자: E ~ F {}  같은 부모를 가지고 E 뒤에오는 F에 적용. 바로 뒤에올 필요는 없음

 

다중 선택자

  • 각 선택자마다 쉼표(,)로 구분할 경우 .class1,  .class2,  .class3 

각각의 항목을 OR로 적용함.

즉, class1, class2, class3 모두에 스타일이 적용됨.

 

  • 쉼표 없이 공백(띄어쓰기)으로 구분하여 사용시 .class1 .class2 .class3

뒤에 나온 선택자가 하위 개체로 지정됨.

 

즉, class1 

       ㄴ class 2

               ㄴ class 3 으로 지정되고,

class1 요소 내부의 class2 요소 내부의 class3 요소에만 스타일이 적용됨.

 

  • 공백 없이 연결해서 지정시  .class1.class2.class3 

class="class1 class2 class3"에 해당하는 요소에만 스타일이 적용됨.

즉, AND 처리되는 것. (class1이면서 class2면서 class3인 요소에만)

 

 

클래스명 내 띄어쓰기

 class 이름에는 공백이 허용되지 않으므로, class 내에 공백이 있는 경우 두 개의 class를 가지게 됨.

<p class="outside one">Outside 1</p>

<p> 태그는 outside와 one이라는 두 개의 class를 가짐

 

참고

https://www.nextree.co.kr/p8468/

https://velog.io/@dev2820/CSS-CSS-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%A0%95%EB%A6%AC

https://ppoote.tistory.com/127

 

메소드와 this

객체 안의 메소드

-메소드에서의 this는 그 메소드가 소속 되어있는 그 객체 자신을 의미한다.

'Today I Learned' 카테고리의 다른 글

231006/D+3  (0) 2023.10.06
[JS] var /let /const  (0) 2023.10.05
git pull이 안되는 문제  (0) 2023.10.05
231004/D+1  (0) 2023.10.04
css  (1) 2023.09.22
'Today I Learned' Related Articles more