코딩 교육 TIL

2024-01-26 AI 코딩 TIL

HyunjunPark 2024. 2. 16. 20:24

html의 속성에 대하여

html은 해드와 바디로 기본적으로 나뉘어져있으며 해드는 인터넷 주소창 윗부분을 표시하고

바디는 인터넷 창 안부분에 표시 할 것을 적어준다.

​

ctrl + / 누르면 드레그를 한 부분을 주석처리 할 수있다.

​

개발자 도구에 확인가능 범위에 따른 확인 가능하다

​

코딩시 편리한 단축키들

css의 속성에 대하여

css는 html로 작성한 것을 꾸미는 명령이다.

​

명찰사용 : 여러가지 묶음 = class

<style> .mytitle { color: red; font-size: 40px; } </style> <body> <h1 class="mytitle">안녕하세요</h1> </body>

​

클레스를 사용할 때에는 스타일 칸에 .으로 지칭을 한다.

​

명찰사용 : 하나만 지정 = id

<style> /* css */ #id { color: red; font-size: 40px; } </style> <body> <p id="id">ID :<input type="text"></p> </body>

​

아이디를 사용할 때에는 스타일 칸에 #으로 지칭을 한다.

​

스타일에 사용할 수 있는 명령어들

각 속성 위치 조정

상속관계에 대해서 잘 알아두어야 한다

​

html box의 형태는 기본적으로 네모이며

​

block : 줄 (새로운것이 있으면 밑으로 쌓인다.)

inline : 글자 ( 새로운것이 있으면 옆으로 쌓인다.)

​

스타일에 display : flex;를 입력하면 전부 가로로 정렬이 된다.

​

justify-content: center; 입력하면 중앙으로 맞춤

​

​

flex를 사용하면 요소의 위치를 내가 원하는 방향으로 조정이 가능하다.

​

개발자 모드로 들어가서 내가 원하는 모습을 미리 볼수도 있고 코드를 복사해서 바로 넣어줄 수 있다.

​

​

기본적인 홈페이지의 구조 및 명칭

​

마진과 패딩의 차이를 잘 인식을 해서 공간을 나누어 주어야한다.

​

​

굳이 일일이 style 안에 값을 적어줄 필요없이 바로 명령어 안에서 적어주어서 스타일을 변경해줄수 있다.

<nav class="navbar bg-dark border-bottom border-body d-flex justify-content-center" data-bs-theme="dark">

​

​

​

내가 만든 사이트