CSS를 배우기 전 HTML 기본을 보고 오시면 더 좋다고 생각합니다.
https://pabeba.tistory.com/147
HTML 기본 문법
HTML 이란? HyperText Markup Language 로 웹을 이루는 가장 기초적인 구성요소입니다. 웹사이트를 인간으로 치면 뼈대라고 할까요? CSS는 살과 옷 이라고 하면 JavaScript는 행동이라고 하면 좋겠습니다. 그
pabeba.tistory.com
CSS 사용이유
HTML에서 태그를 사용할 때 각 태그에 있는 속성 값을 넣어서 결과를 변경하기도 하였는데, 그 속성값을 HTML 태그에서 하나하나 관리하기 힘들고 어렵기 때문에 하나로 묶기 위해서 CSS를 사용합니다.
예시를 보여드릴게요.
예시
<body>
<h4>css 선택자 연습</h4>
<ul>
<li>html: web document 컨텐트 제공</li>
<li class="ct">css: web site 의 디자인 스타일을 담당</li>
<li>javascript : web document의 행위를 담당</li>
<li class="ct">servlet : java web programming 기반기술, MVC 의 Controller 역할담당</li>
<li id="it">jsp : java server page, 동적인 web document 생성을 담당</li>
</ul>
</body>css와 servlet을 설명하는 글의 색을 같게 하고 싶고
jsp를 설명하는 글의 색도 따로 바꾸고 싶은데
두개를 같은 색으로 할거면 두개를 같은 class나 id로 묶어서 변경하면 코드의 중복을 막을 수 있지 않겠습니까?
따라서 css를 이용해서 변경해보겠습니다.
<style> 태그를 이용하여 변경합니다.
<style type="text/css">
/*css 로 현 웹문서의 모든 li 태그를 선택하여 color 을 lime으로 속성을 준다*/
li {
color: lime;
}
/*css 선택자로 class 명 ct 요소들은 orange color 속성이 부여되게 한다
클래스 선택시에는 .클래스명 으로 선택한다 */
.ct{
color: orange;
}
/*class : 여러 요소들을 선택할 때 사용 -> .클래스명 으로 선택
id : 특정 요소를 선택할 때 사용 -> #아이디명 으로 선택 */
#it{
color: red;
}
</style>이런식으로 id 값은 #을 이용하여 표시하고
class값은 . 을 이용하여 표시합니다.
결과값은
이렇게 나옵니다.
그리고 css도 선조들이 만들어 놓은 것들이 많은데 부트스트랩에 가보면 정말 많은 것들이 예시로 나오고 직접 사용해 볼 수 도 있습니다.
부트스트랩 4에 가보시면 재미난 것들이 많습니다.
https://www.w3schools.com/bootstrap4/bootstrap_images.asp
Bootstrap 4 Images
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
이 곳에 가서 try it yourself 를 눌러보시면 예시 코드가 나와있는데, 그 코드를 보고 잘 따라해보면 사진을 자유자재로 변경할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>step5-bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<img src="picture/semicon.png" class="rounded-circle" alt="아이유" width="304" height="236">
<br><br>
<img src="picture/semicon.png" class="img-thumbnail" alt="아이유" width="304" height="236">
</div>
</body>
</html>이런식으로 저장된 사진을 변경하게 되면
이렇게 사진을 변경할 수 있습니다.
소감
저는 미적 감각은 부족한 것이 많은지라 어떻게 이쁘게 만들지는 잘 모르겠습니다. 하지만 사용자의 편의를 생각하는 일이라면 정말 열심히 임해볼 자신이 있습니다. 다른 사람의 마음을 느끼고 싶기에 더 사용자의 편에 서서 알아보고 싶습니다.
'코딩 개발' 카테고리의 다른 글
| Ajax - 회원가입 (아이디 중복 체크) (0) | 2023.06.10 |
|---|---|
| [네트워크] HTTP GET 요청과 POST 요청 (0) | 2023.05.16 |
| HTML 기본 문법 - (head, body, h, a, img, ol, ul, table tags) (0) | 2023.05.15 |
| Apache Tomcat & Eclipse 설정하기 (Window, macOS 공용) (1) | 2023.05.13 |
| Apache Tomcat (WAS, Web Server, Apache HTTP Server, Apache Tomcat) (1) | 2023.05.13 |
