HTML
앵커(anchor)
href 속성을 통해 주로 다른 페이지나 같은 페이지 내의 지정한 위치로 이동한다.
줄 수 있는 속성
- href
=> 하이퍼링크가 가리키는 url- download
=> 링크로 이동하는 대신 url을 저장할 수 있도록 한다- target
=> url을 표시할 위치를 설정한다
=> 주로 _blank의 값을 줘서 새 탭/창에 url이 표시되도록 한다target="_blank"가 적용된 링크 열 때를 이용한 탭 내빙 공격이 있다
(새롭게 열린 페이지에서 원본 페이지에 접근하는 피싱공격)
- rel="noopener" 속성값으로 원본 페이지와 별개로 새로운 최상위 브라우징 컨텍스트를 생성하도록 링크를 열어서 방지한다.
- rel="noreferrer" 속성값으로 해당 링크를 클릭할 때 사용자가 어디서 왔는지에 대한 정보를 주지 않는다.
=> 구형 브라우저에서는 norefferer만 사용이 가능하여, 일반적으로 두 속성값을 같이 사용한다.
접근성 고려하기
새 탭/창을 열거나 다운로드되도록 앵커를 설정했을 때, 갑자기 탭/창이 열리는 등 예상치 못한 일이 벌어졌을 때는 당황할 수 있기 때문에 링크를 클릭했을 때 일어날 일에 대한 설명을 해야 한다.
<a target="_blank" href="링크 주소">
설명 텍스트
</a>위와 같이 a 태그 안에 설명 텍스트를 삽입해서 사전에 정보를 제공해 준다.
Sass
프로젝트가 커질 수록 코드가 지저분해지는 CSS의 단점을 보완하기 위해 사용한다.
환경 설정
- npm init -y
- npm i sass
명령어
컴파일
- (npx) sass_파일이름.scss_파일이름.css
=> 지정한 scss 파일을 지정한 이름의 css 파일로 컴파일 - (npx) sass_scss의폴더이름:css의폴더이름
=> 지정한 scss 폴더를 지정한 이름의 css 폴더로 컴파일
=> 파일이름은 동일하게 컴파일
자동 컴파일
컴파일 명령어 뒤에 --watch를 붙인다.
=> scss 파일을 저장할 때마다 css 파일로 자동으로 컴파일
압축된 css 파일로 컴파일
컴파일 명령어 뒤에 --style=compressed를 붙인다.
=> 배포 환경에서 사용
소스맵 없애기
컴파일 명령어 뒤에 --no-source-map를 붙인다.
=> 소스맵은 유지보수에는 용이하나 배포 환경에선 불필요하므로 배포 환경에서 사용한다
단축어 설정
- package.json 파일 내에 scripts 영역에 "단축어":_"명령어"를 추가
- 터미널창에 npm_run_단축어를 실행해서 사용
중복 명령어 줄이기
=> 명령어에 중복 명령어의 단축어를 앞에 추가하고 --를 사이에 넣는다
=> "단축어": "중복명령어의단축어_--_추가할명령어"
폴더 삭제하기
rimraf 패키지를 설치하고 명령어에 rimraf 폴더이름을 사용하면 쉽게 삭제할 수 있다.
중첩 규칙
중첩을 사용하여 중복된 선택자를 더 쉽게 사용할 수 있다.
- 상위 선택자의 {} 안에 선언 구조를 추가하면 중첩된 구조를 사용할 수 있다
ul {
li {
}
}위의 중첩된 구조는 아래와 같다.
ul li {
}=> 중첩이 많아질수록 가독성이 떨어지기 때문에 가급적 2단계로 하자
- '&'를 사용하여 공통된 클래스이름을 재사용할 수 있다.
=> & 뒤에 텍스트를 추가하면 공통된 클래스이름에 해당 텍스트가 이어지는 클래스이름이 된다
button {
&:hover {
}
}위는 아래와 같다.
button:hover {
}모듈(modules)
자주 사용되는 속성과 값을 별도의 파일에 분리해서 관리하고 필요할 때 불러와서 사용할 수 있는데, 그때의 분리된 파일을 모듈이라고 한다.
모듈 불러오기
@import와 같은 방식으로 @use를 사용해서 모듈을 불러올 수 있다.
=> 확장자이름은 생략할 수 있고, 해당하는 별칭(namespace)을 같이 써야 해당 모듈을 사용할 수 있다.
@use "경로/폴더(파일)이름" as 별칭 - 별칭을 생략할 경우에는 폴더(파일) 이름이 별칭이 된다
- 별칭을 *로 하면 별칭을 붙이지 않고 모듈을 사용할 수 있다
모듈의 변수를 사용하기
변수이름 앞에 해당 별칭을 붙인다
=> 별칭.변수이름
모듈 내보내기
@forward를 사용하여 반복적인 @use의 사용을 줄일 수 있도록 모듈의 묶음을 만들 때 사용한다.
- 사용방법은 모듈을 불러오는 방식과 같다
- '_'와 같이 파일 이름의 index도 생략할 수 있어서 파일 이름이 _index인 모듈로 합치고 폴더 이름을 호출하는 방식을 사용할 수 있다
파셜(partials)
scss파일들을 css파일로 컴파일하는 과정에서, 컴파일할 필요가 없는 파일들을 파셜이라고 한다.
=> 파일 이름 앞에 '_'를 붙이면 변환에서 제외시킬 수 있다
=> 모듈을 불러올 때는, 파일 이름에 '_'를 넣지 않아도 불러올 수 있다
변수
Sass에서는 변수 이름의 '-'와 '_'를 구분하지 않는다.
$변수이름:_값;
믹스인(mixin)
코드의 반복을 줄이기 위해 모듈뿐만 아니라 믹스인을 사용할 수 있다.
믹스인 정의하기
@mixin_믹스인이름{
코드
}해당 코드들을 정의한 이름의 믹스인 안에 담는다.
믹스인 사용하기
ul {
@include_믹스인이름;
}선언부에 해당 믹스인의 모든 코드가 삽입된다.
매개변수를 이용해서 믹스인 사용하기
믹스인을 정의할 때 믹스인이름 뒤에 () 안에 '$'로 시작하는 매개변수 이름을 설정하고 코드에서 변수가 될 부분에 삽입한다.
@mixin_믹스인이름($변수이름: 기본값)
- 변수를 설정할 때 기본값을 설정할 수 있다
- 변수를 2개 이상인 믹스인을 사용할 때는 정의된 변수의 순서를 지켜야 하고, 순서를 지키지 않으려면 변수 이름과 값을 같이 넣어줘야 한다
코드에서
#{매개변수이름}으로 사용하면 변수 이름의 텍스트를 그대로 값으로 할 수 있다
연산자
Sass에서는 기본적인 계산기능을 제공한다.
=> 계산기능을 사용하기 위한 내장함수 @use 'sass:math'를 먼저 선언해야 한다.
- 곱하기를 사용할 때는 단위가 같아야만 계산된다
=> 단위가 다를 때는 calc() 함수를 사용하자- 나누기는 '/' 대신 math.div(분자, 분모)를 사용한다
