[한경xToss] 1-2주차 요약 : 컴퓨터 교육 / HTML / CSS

 

 

 

* 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다.

 

매일 노션에 학습 내용을 정리하고 있는데, 블로그에도 요약해서 정리하면 좋을 것 같아 업로드한다

회고..가 아닌 리얼 요약

 

강사님이 항상 설명하실 때 최대한 구체적으로 알려주셔서

모르던 내용이나 애매하게 알고 있는 것들을 확실하게 깨닫고 넘어갈 수 있어서 좋았다.

전공 과목에서 모두 배웠던 내용이지만, 이렇게 복습하면서 새로운 내용이나 꿀팁도 알게 됨!!

 

 

---

chap1. 운영체제(OS)

chap2. 컴퓨터 구조

• 2진수 소수점‼️을 8 / 16진수로 변환 : 소수점 기준으로 3 / 4개씩 자르고 앞뒤에 0을 채우고 변환

chap3. 정보통신

chap4. 네트워크

---

생성형 AI (LLM)

1. chatGPT : 실시간 검색
2. 클로드 : 10개월 전 데이터까지 유효
3. 제미나이 : 실시간 검색
4. 퍼플렉시티 : 실시간 검색

코딩에서 AI를 쓰는 건 좋음, 오히려 사용을 권장함

하지만 기초가 되어있어야 추후 디버깅이나 응용이 가능!!

코드를 가장 잘 뽑는 ai는 클로드 최신버전

 

---

HTML 실습

VScode, Github, liveServer 사용

Same-Origin Policy, SOP (동일 출처 정책)

: 브라우저는 출처가 동일한 경우에만 리소스를 공유할 수 있게 제한.

Cross-Origin Resource Sharing, CORS

: 출처가 다른 리소스를 사용할 수 있도록 하는 몇 가지 예외 조항이 있는데, 그중 하나가 바로 CORS 정책을 지킨 리소스 요청입니다. 다시 말해, CORS 정책을 지킨다면 SOP에서 기본적으로 제한하고 있는 행위들의 적용을 받지 않게 된다는 뜻입니다.

 

 

 

더미 이미지 생성하는 방법 ‼️ - via.placeholder 사용하기

<img src="http://via.placeholder.com/600x300" />

---

<title>메타 태그: 문서의 정보를 담고 있는 태그</title>

<!-- 1. charset: 문자인코딩 타입을 지정합니다. -->
<meta charset="UTF-8" />

<!-- 2. viewport: 모바일 해상도에 대응하기 위한 설정입니다. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- 3. X-UA-Compatible: 익스플로러 브라우저의 최신 버전에 대응합니다. -->
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<!-- 4. content-type: 콘텐츠의 형식을 지정합니다. -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<!-- 5. keyword: 검색 엔진에 노출될 키워드를 지정합니다. -->
<meta name="keyword" content="쇼핑몰, Shop, 과자, 콜라" />

<!-- 6. description: 검색 엔진에 노출될 웹사이트의 설명을 입력합니다. -->
<meta name="description" content="저의 웹사이트입니다." />

<!-- 7. robots: 검색 엔진의 크롤링 동작을 제한합니다. -->
<meta name="robots" content="noindex,nofollow" />

<!-- 8. author: 웹사이트 제작자의 정보를 입력합니다. -->
<meta http-equiv="author" content="홍길동개발자" />

<!-- 9. refresh: 5초 간격으로 페이지를 새로고침하거나 다른 URL로 이동시킵니다. -->
<meta http-equiv="refresh" content="5; url=./ex24.html" />

 

[ AI 특강 ]

suno ai : 음악 작곡, 작사

DeepL : 번역기, 글쓰기

chatGPT 보이스 모드 → 실시간 통역, 영어 공부 등 가능

감마 ai : ppt 제작

 

---

CSS 태그 스타일 선택자

input 타입 선택

앵커태그(a 태그) 선택자

동위레벨(형제 요소) 선택자

반응(액션) 선택자 등

 

색상 속성값

배경 이미지 속성, background size

 

display 속성

marign / padding

Box-sizing 속성

css position 속성

콘텐츠 초과 처리 - overflow 속성

img태그 이미지 배치 - object-fit 속성

텍스트나 콘텐츠의 정렬

레이아웃 배치를 자유롭게 - display : flex

sprite - 스프라이트 : 포지션으로 한 이미지에서 여러 아이콘 추출하기 (background-position)

 

---

이론수업 + 실습을 여러번 진행하면서

추상적으로 사용하던 개념들도 다시 복습하면서 체화시킬 수 있었다

 

역시 개발자는 평생 공부해야 하는 직업인 것 같다..