Ecole 캡스톤 디자인 3주차

다빈·2024년 10월 14일

Ecole 캡스톤 디자인

Capstone Design🖥️

목록 보기

4/9

1주제:가상 케이스로 기획부터 제작까지 HTML, CSS로 만드는 사이트 Part 2

CSS 적용 방법 (+ 방법별 차이)

1. 외부에서 작성한 CSS 파일을 가져와서 적용
2. HTML 파일을 내부에 CSS 코드를 style 태그로 분리해서 작성
3. 태그에 속성값으로 CSS 코드를 적용시키는 방법
※ 이 방법은 권유하지 않는다 왜냐하면 다른 JS 코드나 CSS 코드에 의해 코드가 올바르게 작동하지 않을 수 있기 때문에
4. 외부에 있는 파일 내에 또 외부에 있는 파일을 임포트하는 방법
절대 쓰지 말 것 컴퓨터는 한 번 읽어온 데이터는 빠르게 읽어오지만 그렇지 않은 건 읽어오는데 일정 시간이 요구된다 그래서 시간이 쓸데없이 많이 쓰이니까 안 쓰는 게 좋다

CSS GENGARDEN 연결 링크
CSS GENGARDEN이라는 CSS 관련 유명 사이트가 있는데 여기 있는 페이지는 모두 동일한 HTML 파일을 다른 CSS코드로 꾸민 것임 요지는 같은 페이지라 하더라도 CSS로 어떻게 꾸며주느냐에 따라 보기가 달라진다는 것이다

각 방법의 차이는 적용할 요소를 특정했기 때문에 셀렉터가 필요없다는 것이다

동일 요소를 가리키는 코드라면 태그의 인라인 코드가 위치상 우선적용될 수밖에 없다! 그래서 여기서는 skyblue 색이 화면에 적용되는 것

참고로 internal CSS가 항상 external CSS 보다 우선 적용되지 않는 점 알고 있어야한다

id를 쓰는 이유는 페이지에서 앵커로 사용하기 위함이다
Javascript, Emmet에서도 똑같이 사용된다
가상클래스와 가상요소는 문법적으로 구분하는 개념이라 꼭 알지는 않아도 됨

ex) p:first-child

p 태그의 하위 자식 태그들 중 첫번째로 나오는 태그에 적용한다
참고로 ':' 이 1개 있건 2개 있건 딱히 별 상관없이 알아서 처리해준다

MDN 링크

CSS 명시도: 코드 적용 우선순위(Specificity)

이건 필요할 경우 계산해주는 계산기가 따로 있기 때문에 필요 시 따로 계산해 적용해주면 된다

브라우저(Browser)

Can I use 연결 링크

새로운 웹사이트를 만들려고 할 때는 웹사이트의 요소들이 각 브라우저의 어느 버전까지 지원되는지를 미리 확인해보아야한다 안 그러면 브라우저에 따라 적용이 안 될 수도 있기 때문

참고로 브라우저들 사이에도 기본 적용값인 user agent stylesheet에서 정의한 값이 다르다..

reset CSS와 normalize CSS를 비교하자면 이렇게 된다

설명 참고 링크

CSS 작업

참고 링크

웹폰트(Web-Font)

폰트를 웹에서 사용할 수 있도록 별도 작업해서 배포한 폰트를 말한다
한글은 눈누에 있는 걸 쓰는 게 제일 좋다

BOX Model 이해하기(Margin Conflict)

이렇게 마진이 종종 충돌하는 경우가 발생하는데, 이건 버그가 아니라 정상적인 동작 결과이다

Fixed : 스크롤과 상관없이 요소를 특정 위치에 고정

Absolute
: 자손 관계의 태그를 기준으로 위치에 고정

이런 식으로 자손 관계의 콘텐츠와 좌표를 연계하여 처리하는 것

미디어 쿼리(Media Queries)

반응형 사이트를 만들려면 미디어 쿼리를 기반으로 만들어야한다

보통 크기가 600보다 작으면 모바일로 보여주고, 600보다 크면 데스크탑 뷰로 보여준다

Float 사용법

CSS Grid

CSS Grid Generator 연결 링크

만든 CSS Grid를 생성하는 HTML 코드도 생성할 수 있다

SASS

이렇게 하면 SASS 모듈화가 가능하다
여기서 이제 @use가 아까 CSS에서 사용하던 @import 라고 보면 된다

제 2주제:도커와 앱라이트를 이용한 개인용 서버 구축

도커(Docker)

Docker

파이어베이스(FireBase)

Firebase

※ 파이어베이스는 처음에는 돈이 별로 안 들지만 계속 이용하게 되면 요금이 꽤나 많이 발생한다

앱라이트(Appwrite)

Appwrite

Install Docker on Raspberry pi 5(Ubuntu Server OS)

ssh로 라즈베리파이에 접속

documentation 홈페이지 접속해서 Manuals → Docker Engine → Ubuntu로 접속

curl -fsSL https://get.docker.com -o get-docker.sh

쭉 내려서 쉘 명령어 찾아서 Ctrl+c, Ctrl+v

cmd에 복붙하고 실행! → docker

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:1.6.0