Tech notes

고정 헤더 영역

글 제목

메뉴 레이어

Tech notes

메뉴 리스트

  • 홈
  • 방명록
  • 분류 전체보기 (155)
    • 블로그 운영 기록 (11)
    • IT (82)
      • R (3)
      • C (6)
      • Linux>Shell (14)
      • Database (7)
      • Javascript (28)
      • HTML+CSS (5)
      • 스터디 (19)
    • 기타 (38)
      • Tips (11)
      • Review (6)
      • Math (1)
      • Money (20)
    • 日本語 (24)
      • JLPTN1(上) (13)
      • JLPTN1(下) (8)
      • 비지니스일본어 (3)

검색 레이어

Tech notes

검색 영역

컨텐츠 검색
HTML의 기본이 되는 시맨틱한 코드를 짜는 법

먼저 시맨틱(semantic)한 코드란 무엇인가? semantic에는 '의미론의'라는 뜻이 담겨있다. 시맨틱한 코드를 짠다는 건 코드에 의미를 부여한다 쯤으로 이해하면 될 듯하다. 더 쉽게 말하면 태그를 남발하지 말자는 것이다. 시맨틱하지 않은 코드의 예 This is not semantic! 위 코드를 시맨틱하게 고쳐보자 This is a footer 그렇다 우리에겐 footer가 있는데 저기서 왜 div를 쓰는가? 즉 적재적소에 알맞는 태그들을 알고 있는 게 중요하다. 위치에 따른 태그 구분 - 페이지 상단 - 네비게이션 바 - 주 콘텐츠. 본문이라고 생각하면 될 듯 - 페이지 하단 여기서 태그는 주로 로고나 네비게이션 바를 포함한다. 미디어를 삽입하는 태그 video not supported src..

IT/HTML+CSS 2020. 12. 30. 20:31

깃허브 페이지로 프로젝트 사이트 만들기

깃허브 페이지는 깃허브 저장소와 연동하여 무료로 사이트를 호스팅 해주는 서비스이다. 무료로 이용가능하고 저장소에 업데이트 된 내역도 곧바로 반영되어 매우 편리하다. 먼저 깃허브 페이지로 보낼 저장소를 고른다. 저장소에는 미리 html 파일과 css 파일을 업로드 해둔 상태이다. 이때 저장소 이름은 딱히 username.github.io 같은 형식이 아니어도 상관없다. 대신 Settings에서 깃허브 페이지 설정을 따로 해줘야한다. 세팅에 들어가서 스크롤을 아래로 내리면 하단에 깃헙 페이지 메뉴가 있다. 처음에는 Branch:none 으로 되어있을 건데 main으로 바꿔주고 Save한다. 그러면 이렇게 깃헙 페이지가 생성되었다는 문구가 뜬다. 사이트 주소는 https://username.github.io/..

IT/Linux>Shell 2020. 12. 15. 17:08

VSCode 에서 깃허브 연동하기

VSCode에서는 따로 메뉴에서 조작해서 깃헙이랑 연동하는 것도 가능하지만 이번엔 터미널을 사용해서 해봤다. 기껏 git 명령어 배워놓고 실전에서 사용하는 건 어렵게 느껴지더라. 막상 해보니 별거 아닌데 싶어서 이렇게 기록해놓음. 터미널에 파일 생성 후 커밋, 깃헙 저장소와 연동하는 과정까지의 기록이 남아있다. 일의 순서를 정리하면 이렇다. 1. VSCode 에서 작업 디렉토리 열기 2. 터미널 열기 3. 파일/디렉토리 생성 4. 현재 작업 중인 디렉토리 초기화 : git init 5. staging area에 커밋할 파일들 추가 : git add . (현재 작업중인 폴더내의 모든 파일 추가) 6. git commit -m "commit message"로 파일들 커밋하기 7. 깃헙에 가서 새로운 저장소 ..

IT/Linux>Shell 2020. 12. 15. 15:38

읽어보면 좋은 와이어 프레임 관련 글 (스크랩)

1. How to create your first wireframe 기본적인 와이어프레임 가이드 The Definitive Guide: How To Create Your First Wireframe Heard people talking about wireframing and wondering what it is? Need to create your very first wireframe, or simply looking for best practises? Learn how to... careerfoundry.com 2. 영감을 주는 웹사이트와 앱 와이어프레임 예시 9 Inspiring Website and App Wireframe Examples Knowing how to wireframe is one t..

IT/HTML+CSS 2020. 12. 15. 14:13

추가 정보

인기글

최신글

페이징

이전
1 ··· 3 4 5 6 7 8 9 ··· 21
다음
TISTORY
Tech notes © Magazine Lab
페이스북 트위터 인스타그램 유투브 메일

티스토리툴바