Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

요리사에서 IT개발자로

스파르타 코딩클럽 FJ Project 웹(web)개발 주석 정리 본문

웹(Web)개발

스파르타 코딩클럽 FJ Project 웹(web)개발 주석 정리

H.S-Backend 2024. 4. 17. 14:59

href = "style/reset.css"/
  • css 파일인 reset.css를 href 속성을 사용하여 지정한 코드이며 <head></head> 섹션안의 있어야한다.

 

href = "#about" class = "list-link"

특정 섹션을 스크롤 할 수 있게 하는 링크

  • href  = 링크 대상 지정
  • #about =해당 섹션 ID 
  • class = 스타일 적용 클랙스
  • list-link = 클래스가 적용된 스타일링된 리스트 항목

 

<link rel = "icon"  type ="image/png" sizes = "16 x 16" href = "src/img/favicon.png"/>
  • 웹 페이지의 파비콘(Favicon)을 설정하는 HTML 코드
  • 파비콘이란 웹 브라우저의 탭이나 즐겨찾기 목록에 표시되는 작은 아이콘.
  1. src폴더의 img안의 favicon이미지를 아이콘으로 표시한다.
  2. 사이즈는 16x16픽셀이며
  3. image타입은 png형식
<img src = "src/img/img/me-1.jpg"  alt = "사진"

alt속성은 이미지 대체 텍스트를 제공하는데 사용한다.

이미지가 출력되지 못할 경우 시각 장애인, 저시력자를 포함한 일부 사용자들이 이미지를 이해하지 못할 때 도움이된다.

 

  • 접근성 향상 : 시각적으로 이미지를 보지 못하는 사람들에게 텍스트를 주어 도움을 준다.
  • SEO(검색 엔진 최적화) : 검색 엔진은 이미지를 읽을 수 없어 alt를 사용함으로 이미지가 노출되는데 도움이된다.
  • 로딩 문제 대응 : 이미지가 출력되지 않으면 alt텍스트로 사용자에게 이미지대한 텍스트를 제공한다.
  • 텍스트 전용 모드 : 일부 사용자는 텍스트 전용모드를 선호할 수 있기에 alt 텍스트를 사용한다.
웹개발자는 항상 alt속성을 사용하는 것이 좋다.

 

<dt></dt>, <dd></dd> 란

<dt>와 <dd>는 HTML에서 정의 목록(Definition List)을 만드는데 사용되는 태그

  • <dt> (Definition Term): 단어 or 구를 나타내며 강조하기 위해 사용된다.
  • <dd> (Definition Description) : 용어의 정의를 설명하는 부분을 나타낸다.
@font-face{ }

 괄호 안에 사용자 지정폰트를 웹페이지에 추가하는 방법

       

fotmat이란

@font-face 규칙에서 사용되는 속성 중 하나, 폰트 파일의 형식을 지정한다.

body::-webkit-scrollbar { }

웹킷 기반 브라우저에서 스크롤 바를 선택한다라는 CSS 선택자

 

#header {} 

#은 CSS에서 ID 선택자를 나타낸다. ID선택자는 HTML 요소를 고유하게 식별, 스타일을 적용 시킨다.

header의 id를 주어 괄호 안에 스타일을 지정할 수 있다.

background-color: transparent;

배경색을 투명하게한다.

z-index : 10;

z-index 는 CSS 속성중 하나, 요소의 쌓임 순서를 칭하며 요소가 겹칠 경우 10보다 작으면 해당요소가 위에 있다.

 

display : flex;

플렉스 박스를 생성한다. 이 안에 있는 아이템들을 배치하는 방법을 지정한다.

유연한 레이아웃 제어 : 플렉스 박스들을 유연하게 배치할 수 있다.

정렬 기능 : 요소들을 가로 or 세로로 정렬 할 수 있다.

공간 분배 : 공간을 효율적 분배하여 요소들을 균등하게 배치할 수 있다.

 

justify-content : ; 

플렉스 안의 아이템을 컨테이너 안에 정렬한다.

right, left, center, top, bottom 등

 

list-link : hover {}

마우스를 괄호 안에 해당하는 부분에 갖다대면 효과를 줄 수 있다.

 

 

padding :  ;

padding은 안쪽으로 여백을 지정하는 속성

position: static;

기본 위치 지정 방법. 속성이 별도로 지정되지 않으면 static이다.

문서 흐름에 따라 배치되며 top, bottom, left, right속성을 사용할 수 없다.

position : absolute;

문서흐름에서 제거된다.겹칠 수 있기에 top, bottom, left, right 속성을 사용하여 위치를 조정시키면된다.

 

line-height : px;

CSS에서 텍스트 줄 높이를 설정한다.

border : ;

CSS에서 요소의 테두리를 설정한다. 테두리의 두께 스타일 및 색상을 지정할 수 있다.

border: none;

CSS에서 요소의 테두리를 제거한다.

border - bottom : 2px solid black;

CSS에서 요소의 아래쪽 테두리를 지정

solid : 테두리 스타일 지정, 실선을 의미

black : 테두리 색상 검은색 지정 

transition: 0.7s ease-out;

CSS에서 애니메이션 효과를 부드럽게 적용하는 속성. 

ease-out은 애니메이션 끝나는부분에 감속이 있는 함수를 사용.

 

flex-direction : column;

플렉스 컨테이너의 아이템을 수직(column)으로 배치. 가로는 row

display: block;

block은 한줄에 하나씩 표시되며 수직으로 쌓인다.

display:inline-block

CSS에서 요소의 표시(display)방법을 설정한다.

  • inline은 텍스트와 같이 가로로 배치한다.
  • block은 새로운 줄에서 시작해서 위에서 아래로 수직으로 쌓인다.
  • 두 요소를 합쳐 가로로 배치도하고 크기에 따라 세로로 동작도 할 수 있다.
position : relative;

요소의 위치를 상대적으로 설정하는 속성. 문서 흐름에 따라 배치되며 자기 자신의 기준으로 위치를 조정할 수 있다.

position : absoulute;

CSS요소의 위치를 절대적으로 설정한고 문서의 흐름을 제거한다.

overflow: hidden ;

컨테이너 안의 내용이 경계를 넘어가면 그 부분은 숨긴다.

text-decoration:none;

텍스트의 장식을 제거한다. 밑줄, 줄 긋기 등의 장식을 없앨 수 있다.

color:inherit;

해당 요소의 색상을 부모 요소로 부터 변환한다.

  • box-shadow : [horizontal offset] [vertical offset] [blur radius] [spread radius] [color]
  • horizontal offset : 그림자의 수평을 나타낸다. 음수값은 왼쪽, 양수값은 오른쪽으로 이동시킨다.
  • vertical offset : 그림자의 수직을 나타낸다. 음수값은 위쪽, 양수값은 아래쪽으로 이동시킨다.
  • blur radius : 그림자의 흐림정도를 나타낸다. 값이 클수록 흐림이 강해진다.
  • spread radius : 그림자의 확장정도를 나타낸다. 양수 값은 그림자를 확장, 음수값을 축소시킨다.
  • color : 그림자의 색상을 지정한다.
cursor : pointer;

CSS요소에 마우스 커서의 모양을 지정한다.

해당 부분에 올리면 마우스 커서의 모양이 포인터(pointer)로 변경된다.

 

btn-next, btn- next:active, btn-next:focus{ }

btn-next 클래스가 활성화(active), 비활성화(focus) 의 스타일을 지정한다.

btn-next:disabled, btn-prev:disabled { }

btn-next와 btn-prev 는 비활성(disabled) 상태의 스타일을 지정한다.

btn-next : hover, btn-prev : hover{ }

btn-next와 btn-prev 버튼 위에 마우스를 올린 경우의 스타일을 지정한다.

 

clip rect(0 0 0 0) ; = clip:rect(위 오른쪽 아래 왼쪽); 

클리핑 영역을 설정하는 속성, 클리핑은 보이는 부분을 남기고 다른부분은 숨긴다.

 

<article> </article>

독립적인 콘텐츠를 나타내는데 사용한다. 독립적인 섹션 사용이 가능하다.

JavaScript

let MoveToTop=funciton() {
     document.body.scrollintoView({behavior:"smooth"})
}
// 맨위로 스크롤하는 함수,
// scrollintoView() 페이지의 맨위로 스크롤 한다.
// behavior:"smooth" 부드러운 스크롤 효과

 

document.querySelector("txt-title ")
const content = 값
let conteentIndex = 0;

//document 객체의 querySelector을 사용하여 괄호 안의 변수에 할당.
//값을 content 변수(상수)에 할당
//let contentIndex는 content의 값을 한글자씩 순차적으로 출력한다.

 

 

let typing = function{
   $txt.innerHTML += content[contentIndex]
}
// typing이라는 함수를 정의하고 $txt요소의 내용에 content문자열의 현재 contentIndex해당하는 문자를 추가한다. (타이핑)

 

contentIndex++;
   if(content[contentIndex] === "\n") {
     $txt.innerHTML += "<br\>";
     contentIndex++;
}
// contentIndex를 증가시킨다.
// content가 출력되다가 개행문자 \n이 나올 경우 
// <br>태그를 추가함으로 줄바꿈이 표현된다.

 

 

개행문자
텍스트 상 새로운줄 또는 행을 바꾸는데 사용되는문자
리눅스에서는 LF(Line Feed) 문자 아스키 코드값 10을 사용,
윈도우는 CR(Carriage Return)아스키 코드값 13을 사용, CRLF(Carriage Return+Line Feed)를 사용
if(contentIndex > content.length) {
   $txt.textContent = "",
   contentIndex = 0;
}
// contentIndex의 길이가 content.length 길이를 넘을 경우 0으로 돌아간다.
setInterval(typing, 200);
// 지정된 시간 (0.2초) 간격마다 지정된 함수(typing)를 반복적으로 출력한다.

 

let imgIndex = 0;
let position = 0;
const IMG_WIDTH = 438;
const $btnPrev = docoument.querySelector("btn-prev")
const $btnNext = docoument.querySelector("btn-next")
const $slideImgs = document.querySelector("slide-images");

// imgIndex는 현재 보여지는 이미지의 변수값
// position은 현재 보여지는 슬라이더의 변수값.
// const(상수) IMG_WiDTH는 이미지 하나의 폭을 나타내며 한번에 한 이미지만 보여줄 때 사용한다.
// $btnPrev는 이전버튼 요소를 선택하여 $btrnPrev를 할당한다. 이전버튼을 클릭하면 이전 이미지로 넘어간다..
// $btnNext는 다음버튼 요소를 선택하여 $btnNext를 할당한다. 다음버튼을 클릭하면 다음 이미지로 넘어간다.
// $slideImg는 이미지 요소를 선택하여 $slideImg를 할당한다.  이미지 슬라이더의 전체이미지를 감싸는 컨테이너.

 

let prev = function () {
  if(imgIndex > 0) {
   $btnNext.removeAttribute("disabled");
  }
}
//imgIndex > 0 현재 이미지가 0보다 크면 버튼을 활성화 한다.
// $btnNext.removeAttribute("disabled"); 다음버튼의 disabled(비활성) 속성을 제거하여 버튼을 활성화한다.
$slideImgs.computedStyleMap.transform = `translateX(${position}px)`;
    imgIndex = imgIndex -1;

//computeStyleMap은 요소의 계산된 스타일을 나타낸다. (값을 설정할 수 없다)
// transform 은 css속성으로 요소의 위치나 모양을 변경하는데 사용
// translateX 함수는 요소를 수평으로 이동시킨다. 슬라이더의 위치를 변경한다.
// ${position}px 값을 수평으로 이동시키고 px단위로 지정된다.
// 슬라이더 위치를 변경한 후 ImgIndex 값을 1 감소시켜 현재 이미지를 업데이트한다.
if(imgIndex == 0) {
   $btnPrev.setAttribute("disabled", "true");
}
// 현재 이미지가 첫번째라면 이전버튼을 비활성화 시킨다.
if (imgIndex < 4) {
    $btnPrev.removeAttribute("disabled");
}
// 현재 이미지가 4가 아니라면 
// disalbled(비활성)를 하지 말아달라(removeAttribute)는 뜻.
$slideImgs.style.transform = `translateX(${position}px)`;
//변수에 저장된 값만큼 슬라이더를 수평으로 이동시킨다.
$slideImgs.style.tansition = "transform .5s ease-out";   
// 슬라이더 이동 변수, 0.5초동안 부드러운 이동을 시켜준다.
let init = function () {                                    // init 은 초기화 함수를 정의
  $btnPrev.setAttribute("disabled", true);     //이전버튼을 비활성화 시킨다
  $btnPrev.addEventListener("click", prev); // 이전 버튼 클릭하면 prev 함수를 호출한다
  $btnNext.addEventListener("click",next);  // 다음 버튼 클릭하면 next 함수를 호출한다.
)

 

반응형

'웹(Web)개발' 카테고리의 다른 글

[IntelliJ] GitHub에 properties 안되게 하는법  (0) 2024.07.12
스파르타 코딩클럽 웹(WEB)의 기초  (0) 2024.04.22
스파르타 코딩클럽(부트캠프) 웹개발 입문 5장  (0) 2024.04.12
스파르타 코딩클럽(부트캠프) 웹개발 입문 4장  (0) 2024.04.12
스파르타 코딩클럽(부트캠프) 웹개발 입문 3장  (0) 2024.04.08
'웹(Web)개발' Related Articles more