1.학습한 내용

(1) 페이지 실습
NAVER e스포츠 부분의 main 부분 제작을 진행하였다.



△ 이스포츠에 걸맞지 않게 음식이름으로 되어 있는데 향후 다시 수정을 할 예정이고 사실 내용보다는 layout에 초점을 맞춘터라 이대로 진행을 하게 되었다.

(2) 학습한 내용
main-article의 등분



red 부분이 overflow: hidden;이라는 code로 인해서 밑에 원 부분에 숨겨져 있다.

float left 적용시에 색상 순서대로 green blue red 순으로 float 정렬이 되고

.article.one을 .article.full로 바꾸어서 height를 100%로 해주면 다음과 같이 float을 이용하여 화면 배치를 할 수 있다.

svg tag

(Scalable Vector Graphic)

맘대로 늘였다 줄였다 하는 그래픽

SVG는 HTML과 같은 일종의 마크업 언어로 웹브라우저에서 다양한 도형, 선, 문자를 표현 할 수 있다. (웹표준 기술)

기존의 이미지 파일들과는 다른 장점을 가지고 있다.

벡터이미지는 점, 직선, 곡선, 다각형 등으로 이루어진 수학을 기반으로 한 이미지로, 사진에서 흔히 쓰이는 픽셀(화소)로 이루어진 래스터 이미지(일반적으로 비트맵이미지)의 대안으로 제작된 이미지이다. 쉽게 말해, 포토샵은 레스터이미지, 일러스트레이터는 벡터이미지로 디자인을 하게 된다. 그래서 벡터이미지는 사이즈의 변화에도 이미지 확대시 보이는 계단 현상이나 화질저하 등이 없는 장점을 가지고 있다.

(reference : https://m.blog.naver.com/PostView.naver?blogId=iyakiggun&logNo=220208512154&targetKeyword=&targetRecommendationCode=1)

2. 실습

깃허브 소스코드 :

https://github.com/Yeonsu-Hong/Daegu_AI_school

git과 github를 제대로 활용!!

3. 어려웠던 내용 & 해결방법

두통으로 인해 컨디션이 좋지않아서 집중하기가 힘들었던 점을 빼고는 어려운점은 없었다.

4.소감

float을 통해서 grid개념을 대체하여 페이지를 짤수 있다는 것이 신기하였고 드디어 git과 github를 제대로 사용하여 code source를 올렸는데, CLI 환경에서 직접 터미널 창의 일종인 git bash 창을 열어 실습하였다. CLI 환경이라는 것이 command line interface의 말로 예전에 대학원에서 linux terminal 창을 열어서 실습하던 생각들이 났다. 현재 따로 공부하고 있는 책의 구성으로는 GUI(graphic user interface)의 챕터도 있는데, 우선은 CLI 방식 자체가 서버에 접속을 한다거나 하는 특정상황에서 필요하기에 이방식으로 올렸는데, 훨씬 쓰기 편한 GUI 방식도 공부하여 올려야 겠다.
장점으로는 업데이트가 되더라도 이전에 일일이 복사하여 올렸던 방식과는 다르게 문서에 직접 access 하지 않더라도 업데이트가 된다는 점이 혁신이었다.