html, css 공부하면서 추가되는..

input 태그의 type을 submit으로

이렇게 하면 제출되는 버튼을 만들 수 있다.

:not()에 대해서

:not() from MDN

예외를 만들 수 있다.

cursor

이걸 통해 커서 전환 효과를 줄 수 있다.
예를 들어 hover에 cursor를 준다든지

text-decoration

이걸 none으로 적용하게 되면 하이퍼링크에 밑줄을 없앨 수 있다.
상속을 하지 않기 때문에 해당 태그에 직접 걸어줘야 한다!

color: inherit

부모 태그로부터 색을 상속 받아온다.

form 태그 안의 attribute로 action, method

action="" 어떤 페이지로 데이터를 보낼껀지
method="" 2가지 방식이 있는데 post, get

음.. ajax를 하면서 두가지 방식의 차이를 알긴 했지만
다른 곳에 프로젝트를 올리고 포트폴리오로 쓰기 위해선 get을 사용해야한다고 한다.

a태그에 색을 입히면 클릭 후 색이 안변하게 할 수 있다.

nav>ul>li*4>a

이렇게 입력하면 nav태그 안에 ul태그 안에 a태그를 가진 li태그를 4개 만들어낼 수 있다. 단 한번의 입력으로!

추가적으로 .클래스이름을 입력하게 되면 그 클래스 이름을 가진 태그를 생성할 수 있기도 하다.

css는 import 혹은 입력 순서가 정말 중요하다.

box-sizing: border-box

padding을 줘도 전체 박스 크기가 변경되지 않는다.

같은 코드가 반복되면 변수로 만들어서 쓰면 편하다.

text-transform: uppercase

만약 대문자가 단지 디자인적인 요소라면 소문자로 입력하고 이 css를 줘서 브라우저에는 대문자로 나타내줄 수 있다.

컴포넌트로 사용하다보면 페이지별로 약간씩 다르게 효과를 줘야할때가 생기는데 그럴때 클래스를 하나 더 만들어줘서 경로를 틀어준다는 느낌으로 그 페이지에 맞게 그 컴포넌트를 손댈 수 있다.

물론 순서 중요!!

3개의 박스를 나열해야 할때

display: flex;
justify-content: space-between;
이렇게 했을 때 잘 안되는 경우가 있다.
그럼 이렇게 줘보자
약간의 꼼수이다.

// css 부분

.alt-header__column {
  width: 33%;
}

.alt-header__column:first-child {
  margin-right: auto;
}

.alt-header__column:nth-child(2) {
  text-align: center;
}

.alt-header__column:last-child {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}

.alt-header__column span:last-child {
  margin-left: 20px;
}

//html부분

<header class="alt-header">
      <div class="alt-header__column">
        <a href="more.html">
          <i class="fas fa-angle-left fa-3x"></i>
        </a>
      </div>
      <div class="alt-header__column">
        <h1 class="alt-header__title">Settings</h1>
      </div>
      <div class="alt-header__column">
        <span><i class="fas fa-search fa-lg"></i></span>
      </div>
    </header>

gh-pages // html, css, js 무료배포

git hub에 저장할때 gh-pages라는 브렌치에 저장해보자.
그럼 다른 사람이 열어볼 수 있는 주소가 생성된다.

배포한 페이지 수정방법으로는 (git hub desktop 이용)
1. master 혹은 main 브랜치로 이동
(vs코드를 열어보면 내용은 해당 브렌치로 바껴있을 것이다.)
2. 수정 -> master branch에서 commit, 그리고 push
3. gh-pages로 가서 상단바 Branch탭 -> update from master
4. 푸쉬

*참고로 html, css 파일명에 대문자가 있으면 안된다.

z-index

엘리먼트들의 layer를 줘야할때 사용가능하며,
부모 엘리먼트가 position: relative일때 사용하능하다.