nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/etc.

프롤로그 아직 개인홈피*^-^*가 유행하던 시절, 저도 홈페이지를 만들고 싶어서 금손님들의 스킨을 다운받곤 했었는데요. 그때 css파일을 보고 이건 뭘까... 얘는 왜 메모장으로 열리지... 했던 기억이 납니다. 네, TMI였습니다. 그래서(?) 오늘은 CSS를 배웠습니다. 익숙치 않은 개념이라 혹시나 잘못된 내용이 있으면 언제든 말씀 부탁드립니다. (천사님들 사랑합니다!) CSSOM CSS로 트리 만들기 지난 글에서 브라우저는 HTML을 보고 토큰화 과정을 통해 DOM을 만들어낸다고 했습니다. CSS도 이와 유사합니다. 한쪽에서 마크업을 해독하는 동안, 한쪽에서는 스타일시트를 보고 CSS Object Model(=CSSOM)을 만들어냅니다. 자, 브라우저가 HTML을 보고 뚝딱뚝딱 DOM을 설계하는 동..

2020. 6. 9.

Blog/etc.

프롤로그 저는... 처음으로 HTML 파일을 봤을 때... '이게 뭐지?' 싶어서 더블 클릭했더니 브라우저가 열려서 놀랐던 기억이 있습니다ㅋㅋㅋㅋ 사실 지금도 신기해요. 진짜 멋지죠. 그런고로 오늘은 이걸 공부해봅니다! 그래서 말입니다. 브라우저는 어떻게 동작하는 걸까요? (feat. 그알) *이 글은 구글링을 바탕으로 작성했습니다. 추가/수정/삭제가 필요한 부분을 말씀해 주시면 감사하겠습니다 :) 브라우저 브라우저란 브라우저는 서버에 자원을 요청(reqest)하고 그걸 응답(response)해 윈도우에 표시하는 역할을 합니다. HTML 파일이나 CSS 파일, 이미지 등이 서버에서 넘어오면 파싱(Parsing)이란 작업을 거쳐 화면에 그려냅니다. 이 과정에서 '어떻게 해석할까?'의 방식은 브라우저마다 조..

2020. 6. 7.

Blog/etc.

프롤로그 처음 Git을 알게 됐을 때 든 생각은 이거였죠. "이렇게 좋은 걸 왜 아무도 안 알려준 거야ㅠㅠㅠㅠ" 과거로 돌아가면 제 자신한테 "야야 이거 먼저 써 봐!!!"라고 말해주고 싶을 정도.... 하지만 저는 웹 퍼블리싱 파트만 따로 작업하는 경우가 많아 다른 팀과 함께 쓸 일이 잘 없었습니다. 저 혼자 브랜치 만들어서 북치고 장구치고 작업하는 게 대부분이었죠 허허허 (외롭...) 그래도 개발자와의 협업을 위해 한 번 짚고 넘어가면 좋을 것 같아 포스팅을 시작합니다. 저(왕초보)를 기준으로 쓴 글이라 깊은 내용까지는 다루지 않았습니다. 히어뤼고! 🤘 Git 시작하기 Git 다운로드 git-scm.com 에 접속하여 다운로드 합니다. (참 쉽죠?) git --version이란 명령어에 반응이 있으면..

2020. 4. 16.

Blog/etc.

뒤도 안 돌아보고 백업없이 포맷하는 바람에 적어보는 익스텐션 리스트 🤓 웹 퍼블리셔가 설치해 두면 좋은 확장 프로그램을 모아봤습니다. 멋진 익스텐션을 발견할 때마다 수시로 수정할 예정입니다. 범용 익스텐션 Prettier - Code formatter [링크] 추천 1순위!!! 꼭꼭 설치하세요! 주요 문법(HTML, SCSS, JSON 등)을 예쁜 형태로 정리해 줍니다. Beautify [링크] Prettier와 비슷한 익스텐션입니다. 에디터 내 코드를 예쁘게 정렬할 수 있어요. vscode-icons [링크] VS CODE 내에 이런저런 아이콘을 추가해 줍니다. 아이콘이 큼직하기 때문에 무슨 파일인지 한눈에 알 수 있습니다. indent-rainbow [링크] 인덴트 단계를 색상으로 예쁘게 구분해 줍니..

2020. 4. 5.

Blog/etc.

https://studio-jt.co.kr/ 디자인이 깔끔하고 예뻤던 사이트. 많이 배웠습니다! 감사함니당( ´ ▽ ` )ﾉ # 프로젝트 리스트의 이미지를 CSS background image 와 태그 두 개로 표현했다. 검색엔진 노출 때문인 것으로 추정. # 어르신 브라우저 대응을 위해 flexbox를 쓰지 않고 있었다. 연습도 할 겸 float, table 등으로 대체해서 써봤다. 써 본 결론은? 그래도 플박이 최고임. # 대부분의 이미지는 jpg로 처리한 듯 했다. 왠만하면 jpg로, 투명처리가 필요할 때만 png로 한다면 이미지 용량을 줄일 수 있을 듯. # 요기서 손이 건물 뒤로 스윽 사라지는 걸 어떻게 표현하지 고민했는데 그냥 overflow 처리했다! 애니메이션은 CSS로 적당히~ 이 영역의..

2019. 10. 31.

Blog/etc.

2019. 9. 17.

Blog/etc.

1. S3에 버킷을 만든다. 이때 이름은 웹사이트 도메인과 동일해야 한다. 예를 들어, 사이트 도메인이 thevitolabs.com 이라면 thevitolabs.com 이란 이름의 버킷을 만들어야 한다. 2. 기존 웹호스팅처럼 폴더를 만들고 그 안에 정적 웹사이트를 구성하는 파일을 업로드한다. 3. '권한' 탭으로 들어가 퍼블릭 액세스를 허용해준다. 버킷 정책에 아래 내용을 붙여넣으면 버킷 자체가 퍼블릭으로 변한다. { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::..

2019. 7. 1.