lution88

[내일배움캠프] AI트랙 - 1주차 웹프로그래밍_1; HTML, CSS의 기본개념 본문

개발일지

[내일배움캠프] AI트랙 - 1주차 웹프로그래밍_1; HTML, CSS의 기본개념

lution88 2021. 12. 15. 16:55

☞ [내일배움캠프] AI트랙 - 1주차 웹프로그래밍_1

[1주차 수업 목표]

1. 서버와 클라이언트의 역할 이해.

2. HTML, CSS의 기초 지식의 이해, 부트스트랩 사용할 줄 알아버리기.

3. Javascript 기초 문법을 익힌다.

1. HTML, CSS의 기본개념.

  •  - HTML은 뼈대.
  •  - CSS 는 꾸미기.
  •  - Javascript 는 움직이기.

- HTML은 구역과 텍스트를 나타내는 코드로,  CSS는 잡은 구역을 꾸며주는 것.

1) HTML 은 크게 head 와 body로 구성되어있다. 

  • [head] 안에는 페이지의 속성정보를, [body]안에는 페이지의 내용을 담는다.

º head 안에 들어가는 대표적인 요소들! : title, link, script, meta 등

- 페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다.

- 즉, 눈에 안 보이는 필요한 것들을 담는 것이라 할 수 있다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

º body 안에 들어가는 대표적인 요소들! :  

<body>
<!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1</li>
        <li> bullet point!2</li>
    </ul>

<!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있다</h3>
    
    span 태그: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    a 태그: <a href="http://naver.com/"> 하이퍼링크 </a>
    img 태그: <img src="img.png"/> 이미지 삽입.
    input 태그: <input type="text"/>
    button 태그: <button> 버튼입니다</button>
    textarea 태그: <textarea>나는 무엇일까요?</textarea>
</body>

※ QUIZ_로그인 페이지 만들기.

로그인 페이지 만들기

[해야할일]
  • head - title 로그인페이지 
  • body - 제목 h1 로그인 페이지
  • body - ID: input 박스 생성
  • body - PW: input 박스 생성
  • 로그인하기 button 생성

2. CSS 기초.

 1) HTML 구조 살펴보기

  - html태그 : 누가 누구 안에 있느냐를 이해하는 것이 가장 중요하다.

  - 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받는다.

빨간색 div 안에, 초록색div, 파란색 div가 들어 있다.

빨간색 div 를 옮기면 그 안에 내용물인 초록/파란색 div도 모두 함께 이동하게 된다.

즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리이다.

 

2) CSS 는 어떻게 사용할까?

- <head> ~ </head>안에 <style> ~ <style> 태그로 공간을 만들어서 작성한다.

[CSS 적용 전]
[CSS 적용 후]

- 다양한 CSS 기능들이 있으니 필요한 기능이 있다면 구글링하여 사용해 보면 된다.

 

'개발일지' 카테고리의 다른 글

[내일배움캠프] AI트랙 - 1주차 웹프로그래밍_4_CSS 활용해보기  (0) 2021.12.16
[내일배움캠프] AI트랙 - 1주차 웹프로그래밍_3_폰트, 주석, 부트스트랩  (0) 2021.12.15
[내일배움캠프] AI트랙 - 1주차 웹프로그래밍_2; CSS 활용  (0) 2021.12.15
[내일배움캠프] AI트랙 - 1주차 파이썬 기초 문법_2  (0) 2021.12.15
[내일배움캠프] AI트랙 - 1주차 파이썬 기초 문법_1  (0) 2021.12.15
'개발일지' Related Articles more
Comments