삐제제의 개발 노트

flexbox는 이름 그대로 유연한 박스를 의미합니다. flexbox를 사용할때는 지켜야 할 규칙이 있습니다. 첫번째 규칙 : 자식 엘리먼트에 아무것도 적으면 안된다. 부모 엘리먼트에만 명시해야합니다. 위 규칙을 참고하여 flexbox를 만드는법은 간단합니다. display: flex; 코드를 넣어줌으로써 body를 flex컨테이너로 만들어 주는것입니다. div 태그는 참고로 박스.. 원래의 형태가 블럭의 형태를 띄는 친구들입니다. (블럭은 블럭 옆에 다른 요소들이 올 수 없습니다.) 하지만 위 코드처럼 flex 속성을 주게되면 여전히 블럭임에도 불구하고 옆에 다른 블럭들이 나란히 놓이게 됩니다. 마치 인라인 처럼요. 우선 이렇게 설정해주게되면 다른 더 많은 속성들을 사용할 수 있습니다. 우선 justi..

Hello Hello Hello Hello Hello Hello Hello 우리는 html 태그에 id 나 class와 같은 속성을 부여해줄수있다. CSS는 우리가 코딩한 html태그를 선택하여, 그 태그가 안고있는 텍스트들을 예쁘게 만들어 줄 수 있다. 먼저 head 태그 내부에 style태그를 만든다. 우리는 이 style 태그 내부에 CSS 코드들을 작성한다. 그리고 여기서 css 코드로 꾸며줄 html태그를 선택해야하는데 이것을 우리는 선택자 라고 부른다. 먼저 이 게시글의 제목인 id 와 class 속성에 대해 알아야하는데, id 와 class 속성이 해주는 역할은 비슷하다. 그 태그에 이름을 붙여주는거라고 생각하면된다. 다른점은 id는 유일해야 한다는것이다. class는 겹쳐도 상관없다. 유일..

블럭(Block) : 옆에 다른 요소가 올 수 없는것. 블럭의 유용한 특징 세가지 : margin, padding, border margin : box의 경계의 바깥에 있는 공간, 속성값이 하나이면 사방이 모두 적용된다는것이고 속성값이 두개면 순서대로 상하, 좌우를 의미한다.. ex) margin: 20px 15px; < 상하 20px 좌우 15px 만약 4개의 값을 준다면.. ex) margin : 20px 5px 12px 9px; 순서대로, 위, 오른쪽, 아래, 왼쪽 (시계방향) 순서대로 적용된다. padding : 경계로부터 안쪽에 있는 공간 border : box의 경계를 의미한다. 쉽게 말하면 테두리? style도 여러종류가있지만, 주로 solid를 많이 사용하는 편 속성은 width, styl..

HTML 코드에 헤드 태그 부분에 link 태그를 이용하여 넣어줄수있다. 위 코드에선 넷플릭스 홈페이지에서 이미지 링크를 긁어왔다!

semantic 이란? 사전적인 용어는 의미의, 의미론의 라는 뜻이다. 그렇다면 HTML이랑 semantic 이랑 무슨 관련이 있는것일까? 우선 결론부터 말하자면, HTML코드를 작성할때 좀 더 의미있게 코드를 작성하는것을 말한다. 우리가 자주 쓰는 컨테이너는 태그인데 주로 div는 division의 약자로 우리가 HTML 코드를 작성할때 주로 레이아웃이라고 해야하나.. 어쨌든 나눌때 사용한다. (레이아웃 등을) 오늘 쓴 글의 주제인 semantic 태그도 div랑 비슷한 역할을 한다. 기능은 거의 똑같다고 보면된다. 쉽게말하면 div랑 똑같은데 의미를 부여하는것이다! 다음 코드로 예를들어 설명하자면, News Today is good day to coding © PJJ header , main , fo..

HTML은 Markup language이다. Markup이 의미하는것은 content이다. HTML은 브라우저에게 웹사이트에 어떤 content가 있는지 알려준다. content? : title, link, image, paragraph, date 등등 CSS는 브라우저에게 그런 content들이 어떻게 보여야하는지 알려준다. Javascript는 웹사이트를 똑똑하게 동적으로 만들어준다. 어딘가 클릭하면 뭔가 나타나게하는것도 JavaScript이다. 이 셋중에서 프로그래밍 언어는 Javascript 이다. HTML,CSS는 프로그래밍 언어가 아니다.