사전 필수코스 1일차

 

 

1. ChatGPT 웹개발 1주차 수강하기

 

 - 웹 개발 기본 과정으로 html , css 코드 작성으로 기본적인 웹구조에 대하여 학습

 

 - 각종 태그 사용법과 style 속성에 대하여 학습

 

 - bootstrap document를 참고하여 예시 코드를 활용하여 필요한 코드를 작성

 

 - 음악 추천 사이트를 제작하기 위한 기본 화면을 작성하는 과제를 수행

 

 

2. 새롭게 알게된 지식

 

 - meta 태그 : 사이트 자체에 대한 정보를 표기 화면상에는 표시가 없으나 브라우저나 검색 엔진에서 사용

 

 - viewport : <meta name="viewport" content="width=device-width, initial-scale=1">

  사용자 환경(실행되는 환경)에 맞추어 크기를 설정하기 위해 사용

 

 - <style> 에서 link 와 @import 는 결과적으로 외부의 스타일 관련 코드를 가져오는 동일한 기능을 수행한다. 하지만 link는 코드 실행(loading) 과정에서 아래의 코드가 병렬(동시)으로 수행되지만 @import는 순차적으로 처리된다.( load 할 메모리가 큰 경우 시간 지연이 발생)

 

 - link 사용법

     <link rel="stylesheet" href="경로">

 

 - @import 사용법

    @import url("경로");

   * 한 css 내부에 여러 스타일 시트를 모듈화 할때 사용하거나, 외부 css 파일에 종속적인 스타일 정의를 했음을 명시하는 경우 사용

 

 - p 태그 : paragraph, 문단의 약자로 하나의 문단을 표현

 

 - name, id, class 태그 차이

   name : form에서 데이터를 submit 하기 위해 사용 css에서 사용 불가 ( 여러 요소에 사용 가능 )

   class :  css 에서 식별자로 사용 ( 여러 요소에서 사용 가능)

   id : css 에서 식별자로 사용 ( 여러 요소에서 사용 불가능)

 

     class로 일반적인 특징을 정의하고 필요시 해당하는 코드에 접근하기 위해 id를 사용하여 접근할 수 있다.