Xp
자동
Free-Talk

Html이나 코딩에 대해서 지식이 있으신 분 계실까요?

 
  579
2018-10-18 10:26:28

안녕하세요 저는 시각디자인을 공부하는 학생입니다..

이번에 진행하는 작업에 아주 약간의 html 지식이 필요한데

그 쪽 관련해서는 지식이 전무한터라 매니아분들께 지혜를 얻습니다 ㅠㅠ

 

혹시, 웹상에 올라와있는 text들에 해당된 코드값(?)들이 있나요?

있다면 그 코드값들은 어떻게 확인을 하는건지 ㅠ 크롬의 developer tool로 확인을

하는게 맞는건지 모르겠네요 ... 그 text들의 코드값중에 font 코드값이 있으면 다른 코드를 넣으면

font가 바뀌는건지.. 궁금합니다

 

http://onuryazicigil.com/text-invader

 

이 동영상과 같은 작업을 해보고 싶은건데 혹시 이 쪽 관련되서 지식이 있으신분들 도움부탁드리겠습니다 

6
Comments
2018-10-18 11:28:21

일단..알고 계시다시피 크롬 디벨로퍼 툴에서 좌상단에 요소 선택하는 기능을 이용해서 변경해보고자 하는

텍스트를 잡으면 왼쪽 소스에 해당되는 영역이 선택되는데요,

거기서 p 태그하나만 선택해도 되고 상위인 "text" 클래스를 잡아도 되고 하시고

우측에 css 스타일을 변경해볼수 있어요. 이미지 처럼 스타일 먹이면 변경되어서 보여집니다.

 

WR
2018-10-18 12:00:34

정말 감사합니다 ㅠㅠ 덕분에 쉽게 이해할 수 있게 되었습니다 !!!

2018-10-18 11:45:15

일단 아래 링크같은 사이트에서 기초 지식을 어느 정도 쌓으시고 작업에 적용해보시는게 좋을 것 같습니다.

HTML CSS : https://www.w3schools.com/html/html_css.asp

CSS tutorial : https://www.w3schools.com/css/default.asp

그 외에 HTML CSS 같은 단어로 네이버 등에서 검색을 하시면 국내 블로그라던가 추가적인 사이트 들을 참조하실 수 있을 겁니다. 

WR
2018-10-18 12:01:12

당장은 데드라인이 임박해서 두서없이 여쭤봤는데 

천천히 공부를 좀 해봐야겠네요 ! 감사합니다 좋은 자료 알려주셔서!

Updated at 2018-10-18 13:21:02

html style 관련된 모든 항목을 다 아실 필요는 없습니다.

단지 기초적으로 어디에 스타일 관련 설정을 넣으면 적용이 되는가?

이것을 알고나면 그 자리에 기초 예제나 검색을 통해서 얻은 스타일 요소를 적용하시면 됩니다.

예를 들어 폰트를 바꾸고 싶다. 그러면 html css font 이렇게 검색을 하시면 관련된 예제나 문서가 무수히 많이 검색이 됩니다.

그리고, 전문적으로 하실 것이 아니라면 html 태그 자체에 스타일을 넣는 방식으로 하시는게 직관적이고 편하실 겁니다.

이런 식으로요

<p style="color:#ff0000">블라블라</p>

 

위 스타일은 폰트 색상을 바꾸는 것인데, p 태그는 대표적인 텍스트 영역을 감싸는 태그입니다.

Updated at 2018-10-18 14:29:48

큰 틀은 각 페이지마다 html파일과 css 파일이 있어서 html 은 페이지의 전체적인 내용을 담당하고, 거기에 링크된 css 파일은 그 페이지에 적용되는 폰트라든지 색상등 스타일 관련된 내용을 담고 있습니다. 물론 html 자체 내에서 특정 부분에만 스타일을 적용해 줄수도 있습니다만 일반적으로는 페이지 전체를 관장하는 css 파일이 있는것이 보통입니다.

 

링크걸어주신 사이트를 소스 보기를 해서 보시면 

link rel="stylesheet" href="h ttp://onuryazicigil.com/assets/css/fonts.css"

link rel="stylesheet" href="h ttp://onuryazicigil.com/assets/css/master.css" 

 

이런 부분이 있는데요, 저기 링크 걸린 css 파일들이 폰트및 페이지 레이아웃을 지정해 주는 파일입니다. 주소창에 h ttp://onuryazicigil.com/assets/css/master.css 를 입력해서 들어가보시면 내용을 확인하실수 있는데, 중간에 예를 들어

 

h1 { 

 font-size: 4.2rem; 

 font-weight: bold; 

 font-style: italic; } 

 

이런 부분이 있는데 이 설정은 html 파일 중에 [h1] 태그 속에 있는 내용의 폰트를 모두 bold, italic체로 바꿔주라는 내용입니다. 

방대한 내용이라 다 설명드릴수는 없지만 저런식으로 특정 태그에 해당하는 스타일을 모두 일괄적으로 바꿔줄 수도 있고, 또 그 안에서도 딱 원하는 부분만 스타일을 적용하기 위해 html 의 태그에 class 또는 id 를 부여해서 조정하는 방법도 있습니다.

 

글쓰기
검색 대상
띄어쓰기 시 조건








SERVER HEALTH CHECK: OK