swanim

1. css- display: inline-block , width /*div.dclass{ background-color:darkmagenta; } */ div#first{ background-color: aqua; display: inline-block; width: 300px; } div#second{ background-color:darkmagenta; display: inline-block; width: 500px; } div#third{ background-color:darkslateblue; display: inline-block; width: 700px; } inline-block은 줄바꿈이 안 된다. width와 height를 설정해줄 수 있다. 2. margin, padding, bor..

1. HTML, CSS, JavaScript HTML : 구조, 내용 CSS : 디자인(정적) JavaScript : 동적인 구현 가능하게 함 2. div(division) 나눠서 관리하면 디자인, 계산결과 지점 보여주기 쉬움 *크롬창 띄워놓고 ctrl + shift + i 누르면 크롬 개발자 도구 띄울 수 있음(edge에서도 이용가능) it is h1 it is second h1 it is third h1 3. Style 3.1 각각 다른 배경색 적용하기 CSS 스타일(디자인) 적용하기 위해 사용. it is h1 it is second h1 it is third h1 #는 id를 가리킴 background-color: aqua; 을 나타냄 폭을 지정하지 않았을 경우, 처음부터 끝까지 백그라운드 색 설..

1. input, button, heading, a button It is H1. It is H2. It is H3. It is H4. It is H5. It is H6. GooGle :입력할 수 있는 창을 만듦. : 버튼 생성 first second third first second third : 구분선 : 이미지 삽입 : 순서 구분 안 하는 리스트 생성 : 리스트에 어떤 내용이 들어갈지 작성 : 순서있는 리스트

hello world bye! html의 기초에 대해 알아보겠다. 1.1 로 시작하고 로 닫는다. *vscode를 이용해서 실습을 진행하는 경우, html → tab 키 누르면 자동으로 생성해준다. (html로 예시를 든 것뿐, head, body 등에도 적용된다) (기본적인 설명은 코드블럭 안에 들어가 있으므로 생략 ) 1.2 Open with live server html 파일을 만들었다면, 실제로 내가 구현한 소스들이 동작되는지 보고싶을 것이다. (vscode를 기준으로 설명하겠다) 확장에 들어가서 live server라고 검색해보자. 이게 제일 먼저 뜰 것이다. 설치해준다. 설치를 마친 뒤, 다시 탐색기로 돌아가보자. 그리고 html파일을 우클릭하자. 그러면 제일 먼저 Open with live ..