코딩만 따라 해도 웹페이지가 만들어지는 HTML+CSS+자바스크립트

.·2024년 8월 16일

CSS JavaScript html 일독 코딩만따라해도웹페이지가만들어지

[일독]

목록 보기

5/13

출처 : 코딩만 따라 해도 웹페이지가 만들어지는 HTML+CSS+자바스크립트 (도서)

반복해서 봐야지 익숙해지기에, 도서관에서 다른 도서를 대여하였다.

우선 새롭게 안 사실!

프로젝트와 깃허브 리포지토리 연동

아래 명령어를 작업할 vscode프로젝트 폴더에 입력하면 된다.

git config --global user.name 깃허브닉네임
global user.email 깃허브아이디(이메일)

git init
git add.
git commit -m "first commit"
git remote add origin 복사한 url
git push origin master

아직 git, github 학습하지 않아서 이 도서 통해 미리 알게 되어 적재해두겠다...

해당 명령어 입력전에 github통해서 리포지토리를 먼저 생성해둔다.

실제 작업 후 아래 코드를 터미널로 명령하면 github에 업로드된다.

git add . 
git commit -m "작업한 내용 문구"
git push origin master

이 책을 보고 코드를 따라해보면서 메모해둔 것 들 모음이랄까?

스타일 우선순위

선택자에도 우선순위가 있기 떄문에 어떤 선택자를 활용하여 스타일을 적용했는지에 따라 우선순위가 달라진다.

아이디(ID) 선택자 #
클래스(Class) 선택자.
태그 선택자

HTML 태그 내부의 style 속성
HTML 코드 내부의 style 태그
외부 CSS 파일

항상 위에서 아래로만 쏟아져 내리는 폭포와 같이 CSS 코드가 우선순위에 따라 적용되므로, 이를 캐스케이딩(cascading)이라 분른다.

외부 CSS 불러와 아이콘 활용하기

FontAwesome

js코드 head 테그 안에 입력 후 body 태그 안에 적용하면 이모티콘이 불러와지게 된다.

DOMContentLoaded

js 작성시 선캑자를 못 찾는 경우가 발생할 경우 크게 3가지 방법을 생각하자

script 태그의 위치를 아래로 옮긴다
인라인 이벤트 모델만 사용한다.
DOMContentLoaded 이벤트를 사용한다.

setAttribute

요소의 속성 제어하할 때 setAttribute(속성, 새로운 속성값)을 활용할 수 있다.

document.addEventListener("DOMContentLoaded", 
    function(e){
        let input = document.querySelector("input")
        input.addEventListener("click", 
            function(e){
                console.log(e.target.setAttribute("type"))
            }
        )
    }
)

클릭 이벤트에 대한 이벤트 핸들러로 setAttribute()를 활성화시키고 있다. 버튼을 클릭하면 input 태그의 타입을 'text'로 변경하게 된다.