<HtmlStudy /> 웹페이지 제작 시작

 

https://frontdevpark.tistory.com/entry/HmtlTeacher-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0%EB%82%98%EC%9E%90%EC%8B%A0%EA%B3%BC%EC%9D%98%EC%95%BD%EC%86%8D

HmtlTeacher 홈페이지 만들기(나자신과의약속)

 

콘셉트를 많이 뒤집었기에 원래는 다음날 작성하려고 했으나. 이름이 <HtmlTeacher />  결정했지만 내가 뭐라고 teacher? 내가 아는 지식들을 정리하는 홈페이지 때문에 최종 홈페이지 이름은 <HtmlStudty />로 결정했다.

 

- 기획단계 

1.  React로 기반 웹페이지 구성

React 기반으로 웹페이지 구성 전체적인 디자인은 꾸안꾸 느낌?

 

2. 다크모드

요즘 뭔가 React 기반 홈페이지라던가 웬만한 홈페이지에는 다크모드가 있기에 나도 적용해 봐야겠다 해서  다크모드도 적용시켰다.

/* 공통 스타일 */
:root {
    --background-color: #fff;
    --text-color: #000;
    --code-background-color: #eaeaea;
    --button-background-color: #333;
    --button-text-color: #fff;
    --button-border-color: #333;
    --button-hover-background-color: #a19c9c;
    --button-hover-text-color: #ffffff;
    --button-hover-border-color: #a19c9c;

}

/* 다크 모드 스타일 */
:root.dark {
    --background-color: #333;
    --text-color: #fff;
    --code-background-color: #444;
    --button-background-color: #fff;
    --button-text-color: #333;
    --button-border-color: #fff;
    --button-hover-background-color: #666;
    --button-hover-text-color: #ffffff;
    --button-hover-border-color: #666;
    --border-color: 1px solid ##fafafa;
}

/* 라이트 모드 스타일 */
:root.light {
    --background-color: #fff;
    --text-color: #000;
    --code-background-color: #eaeaea;
    --button-background-color: #333;
    --button-text-color: #fff;
    --button-border-color: #333;
    --button-hover-background-color: #a19c9c;
    --button-hover-text-color: #ffffff;
    --button-hover-border-color: #a19c9c;
    --border-color: 1px solid ##fafafa;
}

헤더 쪽에 적용하여 모든 홈페이지에서 다크모드 라이트모드가 적용될 수 있도록

const Header = () => {

const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add("dark");
      document.documentElement.classList.remove("light");
    } else {
      document.documentElement.classList.add("light");
      document.documentElement.classList.remove("dark");
    }
  }, [isDarkMode]);
  
}

return (
<>  
<button onClick={toggleDarkMode} className={styles.toggleButton}>
          {isDarkMode ? "라이트 모드" : "다크 모드"}
        </button>
        </>
)

/* css버튼 사용하실분들은

   position: absolute;
    top: 1rem;
    right: -7rem; 자기 홈페이지 위치에 맞게 바꾸시면됩니당.
*/

.toggleButton {
    position: absolute;
    top: 1rem;
    right: -7rem;
    padding: 0.5rem 1rem;
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 99;
}

.toggleButton:hover {
    background-color: var(--button-hover-background-color);
    color: var(--button-hover-text-color);
}

3. 홈페이지 Header는 MDN 벤치마킹하여 Header 세로로 만들기

라이트 모드

다크모드

왼쪽에 헤더 겸 내비게이션바도 만들었다.

4. 기본적인 디자인 

꾸안꾸..?

 

약간 요런 스타일로 태그를 설명하게 했다. 코드가 저렇게 이쁘게 나오는 것은 감사하게도 prsim 라이브러리를 사용했다.

https://prismjs.com/

Prism

import Prism from "prismjs";
import "prismjs/themes/prism.css";
import "prismjs/components/prism-markup.min.js";


  <code className="language-markup">{exampleCode}</code>
  
  요렇게 사용했다.

 

 이쁜 스타일은 너무 어려워 더 좋은 생각이 나면 홈페이지 추가 및 구상을 해야곘다. 

 

- 추가 예정 

• <HtmlStudy /> 폰트를 바꾸던지 사진을 추가할지 생각
• 푸터 간단하게 추가
• 태그 설명 홈페이지 뭔가 더 추가할 게 있는지 구상 (관련 태그 설명 블로그 링크..? 내 거?)
• 전체적인 공통 css 따로 빼서 적용하기 반응형 홈페이지를 만들 거 기 때문
• 왼쪽 내비게이션 바 쪽