본문 바로가기
나중에 할거

PortSwigger Web Security Academy 번역 프로젝트 - 진행 방식 (작성 중

by yenua 2022. 4. 2.
반응형

원래 생각했던 게, html 긁어와서 기존 페이지와 똑같은 디자인에, 한글과 영어를 혼용하여 표기하는 방식이었다.

번역이라고 해도, 영어 공부 차원에서 하는 것이다 보니 못알아볼 수도 있으니.. 혼용하는게 더 나을 것 같았다.

처음에는 단순히 html 공부라고 생각했었는데 이미지나, css 등등 신경 쓸게 많았다..

 

1. 번역하고자 하는 페이지에서 우클릭-다른이름으로 저장을 하여 html을 저장한다.

→html만 저장되는게 아니라 .js, .jpg, .svg, .css 등등 로컬 환경에서 작동될 수 있도록 하는 것들이 폴더로 따로 저장된다. 얘네랑 html 파일은 한몸이라 하나를 지우면 둘다 지워졌다. 신기하다!

 

2. html에서 필요한 부분 외의 것들을 싹 지운다.

→우리는 게시글이 필요한거지 게시글 목록, 메뉴 이런건 필요없으니까..

 

3. T스토리에서 HTML 모드로 바꾼 뒤에 수정한 html 코드를 복붙한다.

→아까 말했듯, 필요한 리소스들이 없기 때문에 이상하게 나온다.

→리소스들 연결 링크를 기존 사이트에 사용되던 링크로 바꾸면 css는 제대로 적용되지 않고, jpg는 '이미지를 불러올 수 없습니다.'가 뜬다..

→해당 사이트의 jpg 링크 말고, 다른 사이트 내부의 jpg링크는 제대로 작동하길래 githurb 페이지를 저장소로써 사용하고자 했으나 아래 더 간단한 방법이 있었다.

 

4. 외부참조 방식으로 되어있는 CSS를 내부참조로 바꾸고 CSS 파일의 코드를 HTML의 헤더에 집어넣는다.

→성공적으로 디자인이 적용된다!

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

5. 이미지들은 기본모드에서 수정하면 될 것 같다.

반응형