On the journey of

[KIBWA] 웹 구현 : HTML, CSS (1) with ELICE 코딩 본문

Experiences & Study/이브와(KIBWA)

[KIBWA] 웹 구현 : HTML, CSS (1) with ELICE 코딩

dlrpskdi 2023. 9. 7. 09:50

* 본 포스팅은 이브와 프로젝트에서 웹 화면을 기획하기 위해, 개인적으로 엘리스코딩에서 공부한 내용의 기록입니다.

기본적으로 웹을 구성하는 요소는 크게 HTML, CSS, JAVASCRIPT라고 할 수 있다.

  • HTML : 설계도
  • CSS : 디자인(화면 기획에서 CSS를 편집했다!)
  • Javascript : 그 외 기능과 효과
  • 이를 반영하여 '웹'이라는 건축물을 짓기 위해선, 웹사이트를 작성할 때 따라야 하는 공식 표준(기술 규격) 인 웹 표준, 모두가 웹사이트를 사용할 수 있는 웹 접근성을 특히 고려하여 작성해야 한다.  

HTML 문서의 경우, 메모장을 켜서 <!doctype html> 를 맨 처음에 입력해주고, 저장 시 .html 확장자로 저장해주면 된다. 대충 docty.html 로 저장했더니 폴더에 docty에 크롬 이미지가 매칭되어 저장된 것을 확인할 수 있었다.

 

  • HTML 작성 시 사용되는 구성요소
  • 태그 – 열린 태그 <h1>와, 닫힌 태그</h1> 로 이루어져 있다. (열린 태그는 시작 머리에, 닫힌 태그는 코드 입력이 끝난 후에 사용)
  • 속성 – 텍스트를 꾸며주는 style 속성을 갖는다.
  • 속성값 – 텍스트 색상을 네이비로 설정하는 color:navy 속성값을 받는다.
  • 컨텐츠 – 태그의 컨텐츠를 **안녕 엘리스**로 설정해보자. 

잘 실행된 것을 확인할 수 있다. 여기에 이제 추가적으로

문서의 시작과 끝을 나타내는 <html></html> 태그
웹 사이트의 요약 정보를 담는 <head></head> 태그
눈에 보이는 정보를 담는 <body></body> 태그를 <html>태그 안에 입력해야 함
<head> 태그 안에 문자 코드를 위한 <meta charset="UTF-8"> 를 입력
<title>...</title> 입력하고, 태그 사이에 사이트의 제목 넣기
'안녕 엘리스!' 문구를 웹에 나타내기 위해, <body> 태그 안에 <h1 style="color:navy">안녕 엘리스!</h1>를 입력

 

링크와 이미지 입력하기

  • 클릭시 다른 사이트로 이동할 수 있도록 하는 <a></a> 태그
    • (ex)네이버 홈페이지로 이동하기 위해 href="https://www.naver.com"을 열린태그 <a> 안에 입력
  • 새로운 탭에서 웹사이트를 전환하기 위해 target="_blank" 속성값 입력
  • <img> 태그 안에 엘리스 회사 로고의 파일명을 src="elice_logo.png"와 같이 입력
  • <img> 태그에 alt="엘리스 회사 로고"를 입력하여 웹 접근성을 높이기
  • <h> 태그는 웹사이트의 제목이나 부제목처럼, 중요한 정보를 입력할 때 사용 ( <h1>의 텍스트 크기가 가장 크고 <h6>의 텍스트 크기가 가장 작음)
  • <p> 태그는 웹사이트의 주요 텍스트 등 단락을 표현할 때 사용
  • <ol> <ul> 태그는 목록을 나열할 때 사용되며, 각 태그 안에는 <li> 태그를 입력

ex 1)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>엘리스 :: elice</title>
</head>
<body>
    <a href="https://www.naver.com" target="_blank">네이버</a>
    <img src="elice_logo.png" alt="엘리스 회사 로고">  
  
</body>
</html>

ex 2)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>엘리스 :: elice</title>
</head>
<body>

 <h1>
     <a>
         <img>
    </a>
 </h1>
 <h1>엘리스</h1>

 <p>나는 오늘도 달린다</p> 
 
 <ol>
  <li>체셔의 퀴즈</li>
 </ol>
 <ul>
  <li>체셔의 퀴즈</li>
 </ul>
 <ul>
     <li>
        <a href = "#">메뉴1</a>
    </li>
    <li>
        <a href = "#">메뉴2</a>
    </li>

</ul>
  
</body>
</html>

'Experiences & Study > 이브와(KIBWA)' 카테고리의 다른 글

[Deep Reinforcement Learning Hands On] Chapter.04  (0) 2023.08.04
[Deep Reinforcement Learning Hands On] Chapter.02  (0) 2023.08.04
[Deep Reinforcement Learning Hands On] Chapter.01  (0) 2023.08.04
[이브와] 강화학습의 구성 요소와 그 종류 톺아보기  (0) 2023.06.26
[이브와] DQN 알고리즘과 강화학습, 주가예측 (2)  (0) 2023.06.25
'Experiences & Study/이브와(KIBWA)' Related Articles more