제목이 거창하긴 하지만 당일 대본같은 느낌으로 편하게 써놨다
코딩하세영 과정의 장점)
인강 들어도 되지만 모르는 것이 생기면 바로바로 물어볼 사람(=나)이 옆에 있음
스터디 끝난 뒤로도 모르는 것은 언제든 물어볼수있음
내가 준비한 맛보기 과정에서 흥미가 생긴다면 더 깊게 스스로 공부해볼수 있음
구글보다 잘 알려줄 자신은 솔직히 없지만 최선을 다해 함께 찾아줄 의지가 있음!
이론 너무 많이 배우면 재미없으니까 이론은 거의 생략하고(당일 실습 페이지에서 필요한 태그만 훑고 감) 진짜 실용적인것만 알려드림
궁금한거있으면 언제든지 질문!
우리가 배울 것: 웹 퍼블리싱 HTML, CSS 기초
이게 뭔지는 천천히 알려드림
웹페이지 만들 때)
서버
눈에 보이는 페이지를 만들어서 서버와 연결
여기서 눈에 보이는 페이지를 만드는 것이 목표
소위말해 껍데기. 담을수있는건 없음
HTML은 프로그래밍 언어로 웹 페이지를 만들 때 사용됩니다.
구조를 잡는 것. 건물 철골공사
이건 내가 예전에 만들어둔 페이지인데 여기서 css를 해제하면 이렇게 뜬다
이게 바로 구조를 잡아준 것
css는 html로 잡아둔 구조에 스타일을 입히는 것
옷입히기 화장하기 그런 개념이라고 생각
이 링크는 전부 같은 내용의 html 파일을 css만 다르게 준 것
부모 요소와 자식 요소, 형제 요소
보통 부모 요소의 속성을 자식 요소가 상속받음
html 문법은
꺾쇠괄호 <> 로 감싼게 태그(그리고 태그로 감싼 전체를 요소(엘리먼트)라고 부름)
시작태그와 종료태그가 존재(예외도 있음)
종료태그에는 /가 붙음
난 언니에게 정말 기본적인 태그만 알려줄 것
html 구조는
<html>
<head>
<title>홈페이지 이름</title>
</head>
<body>
메모장으로도 코딩이 가능하다
</body>
</html>
메모장켜서 똑같이 작성해보세용
그리고 파일명.html로 저장
그럼 작성한 문장이 웹페이지로 보임~
근데 이걸 하나하나 다 쓰면 시간이 너무 오래 걸리고 귀찮음
메모장에도 할수있지만 에디터가 필요함
-> 색으로 코드 구분 가능, 자동완성, 링크 연결 등 편리한 기능 탑재
vscode 설치
블로그에 설명된 링크 찾기
익스텐션도 깔아놓기 +라이브서버
https://goddaehee.tistory.com/287
! 탭 누르면 자동완성
아까랑 똑같이 작성 후 미리보기
오늘의 목표: 링크 이동이 가능한 메애기 리스트 만들기
머리식힐겸 메애기 사진을 4-5장정도 찾아오세용
이제 html 태그
h1, h2, h3, h4, h5, h6
헤딩태그
제목에 사용
중요도 순서대로 써야함
p
파라그래피 단락
텍스트는 p태그로 감싸서 작성하는게 좋음
a
앵커
링크 연결이 가능함
버튼같은거라고 생각
어디까지 감싸냐에 따라 클릭 범위가 정해짐
div
디비전
아무 의미 없음. 그저 요소를 묶기 위한 태그
스타일을 주거나, 같은 의미를 가진 요소들을 한 곳에 묶는 용도
ul
언오더드 리스트
순서가 중요하지 않은 리스트를 작성할 때 사용
ul을 먼저 선언하고 그 안에 li를 사용해서 각 항목을 작성
img
이미지
경로를 작성해주면 이미지 삽입 가능
여기까지가 html
태그들 알려준 다음에 직접 함께 작성해보기(wrap, contents div + 클래스는 제외)
다 작성하면 이제 쉬는시간
이제부터 css
css 적용 방법은 세가지가 있는데 하나만 알려줌
인터널
헤드에 style 태그 열고 작성
css 문법
선택자, 속성, 값 이름 안외워도 ㄱㅊ!
무조건 세미콜론으로 끝내야함
속성, 값은 중괄호{}로 감싸기
background-color
배경색
제가 알아서 예쁜색 뽑아왔는데 언니 마음대로 pink 이런거 써도 ㄱㅊ
근데 웬만하면 16진법 코드값으로 정확하게 쓰는게 좋음
color
글자색
백그라운드 컬러와 동일
font-size
글자 크기
여러가지 방법이 있는데 보통 px 픽셀로 작성
기본이 16px
font-weight
글자 굵기
숫자로 줄수도 있고 단어값으로 줄수도 있음
text-align
글자 정렬
center 입력하면 가운데정렬
padding
안쪽 여백
이것도 여러 방법이 있는데 우리는 px로 작성
-right 나 -top 처럼 한쪽에만 줄수도 있음
margin
바깥쪽 여백
이것도 여러 방법이 있는데 우리는 px로 작성
width
넓이
px이나 % 사용 우리는 일단 px 씁시다
height
높이
px이나 % 사용 우리는 일단 px 씁시다
border-radius
모서리 둥글게 해주는 속성
px이나 % 사용 우리는 일단 px 씁시다
여기까지 하고 아까 완성한 마크업에 css 적용해보기
이것도 끝나면 블록, 인라인 요소 설명해주고 디스플레이 플렉스 알려주기
'💻 > 코딩하세영' 카테고리의 다른 글
| 코딩하세영 1기: 후기 (0) | 2022.04.03 |
|---|---|
| 코딩하세영 (0) | 2022.03.02 |