https://github.com/ssi02014/responsivewebsite

🖥 W3C 웹 표준 준수 반응형 웹 사이트
https://github.com/ssi02014/responsivewebsite

Last synced: 8 months ago
JSON representation

🖥 W3C 웹 표준 준수 반응형 웹 사이트

• Host: GitHub
• URL: https://github.com/ssi02014/responsivewebsite
• Owner: ssi02014
• Created: 2020-09-09T15:59:51.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-03-06T18:02:18.000Z (over 4 years ago)
• Last Synced: 2024-12-30T06:44:51.885Z (9 months ago)
• Language: CSS
• Homepage:
• Size: 14.1 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 💻 ResponsiveWebSite

### HTML, CSS, JS(Jquery)를 이용해서 만든 W3C 웹 표준 준수 반응형 사이트

### ⭐ Github Page : https://ssi02014.github.io/ResponsiveWebSite/







## 🎥 웹 페이지 화면 

![1](https://user-images.githubusercontent.com/64779472/93800827-1cf23100-fc7c-11ea-9ca9-eea5d11964ab.PNG)

![2](https://user-images.githubusercontent.com/64779472/93800831-1e235e00-fc7c-11ea-8e42-9ca348962595.PNG)









## 🎥 W3C Check

![3](https://user-images.githubusercontent.com/64779472/93802630-ae62a280-fc7e-11ea-998c-e6e400129fbd.PNG)



![4](https://user-images.githubusercontent.com/64779472/93802634-aefb3900-fc7e-11ea-9031-a88ecf316943.PNG)









## 🔖 Main Development Stack

### 👨🏻‍💻 FrontEnd

1. HTML

2. CSS

3. JavaScript(Jquery)







## 📈 HTML 관련 학습 내용 또는 이슈

### 🔍 1. favicon 적용

```html

  

    

    

    

     

     

     

     

    

```




### 🔍 2. 시맨틱 태그 

```html

  1. : 헤더

  2. : 네비게이션

  3. : 사이드에 위치하는 공간

  4. : 본문의 여러 내용(article)을 포함하는 공간

  5. : 본문의 주 내용이 들어가는 공간

  6. : 푸터

```




### 🔍 3. 반응형 이미지

```html

  반응형 이미지: 해상도, 스크린 크기 등이 다른 수많은 기기들에서 정상적으로 표시되는 이미지

  

  

  

```




### 🔍 4. Youtube 영상 가져오기

```html

  

  

```







## 📈 CSS 관련 학습 내용 또는 이슈

### 🔍 1. @media(미디어 쿼리)

```css

  /* 화면 너비 0 ~ 1220px : 데스크탑 */

  @media (max-width:1220px) {

    ...

  }

  /* 화면 너비 0 ~ 960px : 타블렛1 */

  @media (max-width:960px) { 

    ...

  }

  /* 화면 너비 0 ~ 768px : 타블렛2 */

  @media (max-width:768px){

    ...

  }

  /* 화면 너비 0 ~ 600px : 모바일1 */

  @media (max-width:600px){ 

    ...

  }

  /* 화면 너비 0 ~ 480px : 모바일2 */ 

  @media (max-width:510px){

    ...

  } 

  /* 화면 너비 0 ~ 360px : 모바일3 */ 

  @media (max-width:320px){ 

    ...

  }

```




### 🔍 2. 라이트 박스 이미지 효과

```css

  .square a:nth-child(1):hover img {filter: blur(2px);}

  .square a:nth-child(2):hover img {filter: brightness(50%);}

  .square a:nth-child(3):hover img {filter: contrast(10%);}

  .square a:nth-child(4):hover img {filter: grayscale(100%);}

  .square a:nth-child(5):hover img {filter: hue-rotate(120deg);}

  .square a:nth-child(6):hover img {filter: invert(100%);}

  .square a:nth-child(7):hover img {filter: opacity(10%);}

  .square a:nth-child(8):hover img {filter: saturate(10%);}

  .square a:nth-child(9):hover img {filter: sepia(120%);}

  .square a:nth-child(10):hover img {filter: sepia(120%) hue-rotate(120deg);}

```







## 📈 JavaScript 라이브러리(Jquery)

### 🔍 1. Slick을 이용한 Slide 구현하기

```html

  

  

  

  

  

```

```javascript

  // jquery code

  $(".slider").slick({

      dots: true,

      autoplay: true,

      autoplaySpeed: 3000,

      arrows: true,

      responsive: [

          {

              breakpoint: 768,

              settings: {

                  autoplay : false

                  }

          }

      ]

  });

```




### 🔍 2. lightgallery를 이용한 gallery 구현하기

```html

  

  

  

  

  

  


    

        

        blur

    

    

        

        brightness

    

    

        

        contrast

    

    

        

        grayscale

    

    

        

        hur-rotate

    

    

        

        invert

    

    

        

        opacity

    

    

        

        saturate

    

    

        

        sepia

    

    

        

        Mix

    

  


``` 


```javascript

  //jquery code

  $(".lightbox").lightGallery({

    ...

  });

```