(webFront) 프론트엔드 개념정리

💼📝🔑⏰ 📙📓📘📒🎓

💼 HTML

• 웹의 내용을 담당

📝 div 테그 특징

• div테그에 아무값도 없으면 화면에서 안보여진다. => height가 없기 때문에
• width 값의 default 값은 100%(auto값이다.)
• height 값은 default 값은 0이다.
• display:block속성의 기본값을 갖는다.

📝 a 테그 특징

• display css 속성은 default가 inline-block이다.
• 그래서 text-align 속성을 주어도 정렬이 일어나지 않는다.
• target="_blank" 속성을 주면 새창으로 열린다. 안주면 현재화면에서 바뀐다.

💼 CSS

• 스타일 리스트처럼 꾸밈을 담당
• 중복되는 엘리먼트를 정의했을 떄는 아랫줄에 있는 css 스타일이 적용된다.
  • 예외적으로 밑에 있어도 선택자가 긴 것이 이긴다.

📝 CSS에서 중요한 3가지 속성

1. display 속성
   • block : 대부분의 테그들의 default 값이다.
     • 너비가 넓어진다.
     • 한줄에 너비를 아무리 작게 줘도 혼자 사용한다.
   • inline-block
     • 너비가 좁아진다.
     • 한줄에 최대한 들어갈 수 있는 만큼의 element가 들어간다.
     • 글자처럼 창을 줄이면 아래로 떨어진다. 마치 반응형 처럼
     • 쉽게 생각 하면 블럭을 글자 처럼 만든다고 생각하자
   • inline
     • inline-block과 완전히 동일하나, 다른 점은 너비와 높이 속성이 적용되지 않는다.
2. float
3. position

📝 선택자

1. : 후손 선택자는 스페이스로 구분한다
2. > : 자손 선택자는 꺽쇠롤 표시

💼 JS

💼 젠코딩

젠코딩이란? tab을 쳤을때 테그가 완성되는 것을 말한다.

• 예시 => a[href="https://www.naver.com"]"+tab 하면 자동으로 만들어줌
• {$} 키워드 : 순번을 출력해준다. ex=> div[style=display:block]{내용 순서:$}*3 + tab