[HTML & CSS] [스파르타코딩클럽 웹] HTML & CSS 기초

Language/HTML & CSS

[HTML & CSS] [스파르타코딩클럽 웹] HTML & CSS 기초

Ella_K 2022. 7. 1. 19:36

🔥 HTML , CSS 기본 내용

HTML

구역과 텍스트를 나타내는 코드
head 와 body로 구성됨
head 안에는 페이지의 속성정보 (meta, script, link, title) 를 담음
body 안에는 페이지의 내용을 담는다.
구역을 만들려면 div태그를 이용한다. div로 묶여져 있는 것은 내용물이 변경되면 같이 변경된다. (block element)
문자 일부만 선택해서 지정할려면 span태그를 이용한다. (inline element)
특정 부분을 지정하기 위해서 class와 id를 사용한다. 지정 범위는 class > id 이다.
class 는 무언가를 그룹핑한다는 말. 그룹핑하고 싶은 것들을 같은 class로 지정. ex> 반
id는 무언가를 식별한다는 말. 하나만 존재할 수 있음. 정확하게 하나만 타겟팅. ex> 학번

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

CSS

<head> ~ </head> 안에 <style> ~ <style> 로 공간을 만들어 작성
HTML body 안에 내용물들에 지정한 class 또는 id이름을 이용하여 style을 먹인다.
예를 들어 아래 코드에서 'mytitle' 클래스를 가리킬 때, .mytitle{...}를 이용하여 style을 먹인다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | 로그인페이지</title>
    <style>
        .mytitle {
            color: white;
            width: 300px;
            height: 200px;
            background-image: url('~.jpg');
            background-position: center;
            background-size: cover;
            
            border-radius: 10px;
            text-align: center;
            padding-top: 40px;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력해주세요</h5>
    </div>
</body>

</html>

class 중에서 특정 부분만 style을 먹이고 싶을 때 'id' 를 이용한다.
아래 'first' id를 가리킬 때, #first{...}를 이용하여 스타일을 먹인다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <style>
        span{
            font-weight: bold;
            color: orange;
        }
        .js{
            color: red;
        }
        #first{
            color: blue;
        }

    </style>
</head>
<body>
    <h1>WEB</h1>
    <h2>JavaScript</h2>
    <p>
    <span id="first" class="js">JavaScript</span>, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside <span>HTML</span> and <span>CSS</span>.[11] As of 2022, 98% of websites use <span class="js">JavaScript</span> on the client side for web page behavior,[12] often incorporating third-party libraries.[13] All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.

    <span class="js">JavaScript</span> is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[14] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).

    The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides <span class="js">JavaScript</span> APIs for I/O.

    <span class="js">JavaScript</span> engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js.

    Although Java and <span class="js">JavaScript</span> are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design.
    </p>
</body>
</html>

span > class > id
class 를 이용해서 광범위 하게 효과를 주고, 그 중에서 예외처리하고 싶은 태그들을 id 선택자로 효과를 준다.

css 파일 분리: html 파일이 있는 같은 폴더에 css파일 만들고, head에 태그 불러오기

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

자주쓰이는 CSS

width, height : 구역의 크기 지정
color: 글자 색 지정
text-align: text 정렬 방법
background-image: url(배경 이미지 저장 링크)
background-size: 배경 크기 지정
background-postition: 배경 위치
background-image, background-size, background-position 세개 같이 다님
border-radius: 테두리를 둥글게 만드는 속성
margin: 위 오른쪽 아래 왼쪽 순서로 바깥 여백 지정

/* 20px 20px 20x 20px와 같음 위 오른쪽 아래 왼쪽 20px씩 띄어라*/
margin: 20px

/* 위20px 오른쪽auto 아래0px 왼쪽auto씩 띄어라*/
margin: 20px auto 0 auto;

padding: 위 오른쪽 아래 왼쪽 순서로 안쪽 여백 지정

padding: 5px /* 4면이 모두 5px */

padding-top:5px;
padding-right:7px;
padding-bottom:3px;
padding-left:0px;

padding: 5px 7px 3px 0px

CSS 꿀팁들

이미지 어둡게 하기

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), url(~.jpg))

내용물 가운데로 옮기기

/* 4개 같이 다님  */
display: flex;
flex-direction: column; 
justify-content: center;
align-items: center;

열 기준으로 가운데로 옮길려면 flex-direction: column;
행 기준으로 가운데로 옮길려면 flex direction: row;

버튼 위로 마우스 올렸을 때 효과 넣기

.클래스 > button:hover{
   효과
}

/* button이 hover됬을 때 선이 굵어지는 효과*/
.mytitle > button:hover{
    /* 경계: 굵기2px 실선 흰색 */
    border: 2px solid white;
}

box shadow

/* none | x-position, y-position, blur, spread, color | inset | initial | inherit*/
box-shadow: 0px 0px 3px 0px gray;

none: 그림자 효과 없애기
x-position: 가로 위치. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어진다.
y-position: 세로 위치. 양수면 아래쪽에, 음수면 위쪽에 그림자가 만들어진다.
blur: 그림자를 흐릿하게 만든다. 값이 클 수록 더 흐려진다.
spread: 양수면 그림자를 확장하고, 음수면 그림자를 축소한다.
color: 그림자 색
inset: 그림자를 요소의 안쪽에 만든다.
initial: 기본값으로 설정한다.
inherit: 부모 요소의 속성값을 상속받는다.

https://www.codingfactory.net/10628 참고

처음에 안나오게 하기

display: none;

이모티콘 모음집

http://emojihomepage.com/

https://kr.piliapp.com/facebook-symbols/

모바일에서도 잘보이도록 넓이 지정하기

/* 최대로 500px 까지만 커질 수 있고 그 전까지는 95%만 채워지면 되*/
max-width: 500px;
width: 95%;

max-width로 최대 넓이를 지정하고,
최대 넓이보다 작은 넓이를 가지는 display에서 몇 %로 보일지 width로 지정한다.

부트스트랩 사용하기

https://getbootstrap.com/

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

부트스트랩: 예쁜 CSS를 미리 모아둔 것
bootstrap 적용은 CSS 파일 분리와 원리가 동일 (CSS의 파일이 인터넷 어딘가에 있다는 점이 다름)

Source

스파르타코딩클럽 내일배움단 웹개발 종합반 1주차 : https://spartacodingclub.kr/nb
https://aboooks.tistory.com/81
생활코딩 WEB2 JavaScript https://opentutorials.org/module/3180
https://www.codingfactory.net/10628

저작자표시 비영리 변경금지

'Language > HTML & CSS' 카테고리의 다른 글

[HTML] [스파르타코딩클럽 웹] og 태그로 sns 미리보기를 지정해보자 (0)	2022.07.21
[CSS] 구글 웹 폰트 적용하기 (0)	2022.07.01

현재글[HTML & CSS] [스파르타코딩클럽 웹] HTML & CSS 기초

Study Note

[HTML & CSS] [스파르타코딩클럽 웹] HTML & CSS 기초

🔥 HTML , CSS 기본 내용

HTML

CSS

자주쓰이는 CSS

CSS 꿀팁들

부트스트랩 사용하기

Source

'Language > HTML & CSS' 카테고리의 다른 글

'Language/HTML & CSS'의 다른글

티스토리툴바

[HTML & CSS] [스파르타코딩클럽 웹] HTML & CSS 기초

🔥 HTML , CSS 기본 내용

HTML

CSS

자주쓰이는 CSS

CSS 꿀팁들

부트스트랩 사용하기

Source

'Language > HTML & CSS' 카테고리의 다른 글

'Language/HTML & CSS'의 다른글

관련글

티스토리툴바