Welcome! Everything is fine.

[TIL] 241203 - HTML과 CSS / Java 공부 본문

TIL

[TIL] 241203 - HTML과 CSS / Java 공부

개발곰발 2024. 12. 3.
728x90

✅ 웹개발 기초 강의 듣기

학교 수업때 배운 희미하게 남아있는 기억들을 다시 되짚어보는 시간이었다. HTML/CSS는 솔직히 예전에도 그랬지만 조금 재미가 없다..ㅎ 빨리빨리 넘어가야지.

웹의 동작 개념

  • 클라이언트 : 웹 브라우저를 통해 요청을 보내고, 받은 HTML 파일을 그려줌
  • 서버 : 요청을 처리하고, HTML, CSS, JavaScript, 이미지 등의 데이터를 클라이언트에 응답

HTML 기초

  • HTML(HyperText Markup Language) : 웹 페이지의 구조를 정의하기 위해 사용되는 마크업 언어. 웹 페이지의 뼈대를 만드는 역할.

HTML은 크게 <head> 영역과 <body> 영역으로 나뉜다.

  • head 안에 들어가는 대표적인 요소들: meta, script, style, link, title 등
  • body 안에 들어가는 대표적인 요소들: span, img, input, textarea 등

다음과 같이 간단한 로그인 페이지를 만들며 실습했다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>로그인페이지</title>
	</head>
	<body>
		<h1>로그인 페이지</h1>
		<p>ID: <input type="text"/></p>
		<p>PW: <input type="text"/></p>
		<button>로그인하기</button>
	</body>
</html>

CSS 기초

  • CSS(Cascading Style Sheets) : 웹 페이지의 스타일과 레이아웃을 정의하기 위한 언어. HTML로 만든 뼈대에 디자인을 입히는 역할.

class 태그를 이용해 어떤걸 꾸밀지 가리키고 스타일을 입히는 과정을 배웠다. <style> 태그 안에서 꾸밀 대상을 지정하고(예시에서는 .mytitle 과 같이!) 색상이나 크기, 폰트 등을 바꾼다.

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .mytitle {
            color: red;
            font-size: 40px;
        }

        .mybtn {
            font-size: 12px;
            color: white;
            background-color: green;
        }

        .mytxt {
            color: red;
        }
    </style>
</head>

<body>
    <h1 class="mytitle">로그인 페이지</h1>
    <p class="mytxt">ID: <input type="text" /></p>
    <p class="mytxt">PW: <input type="text" /></p>
    <button class="mybtn">로그인하기</button>
</body>

</html>

 

✔️ margin은 바깥 여백, padding은 내 안쪽 여백을 의미한다.
✔️ 그림을 삽입할 때는 다음과 같은 코드 세 줄을 활용한다.

background-image: url('');
background-position: center;
background-size: cover;

✔️ <div>로 구역을 나눠 작업 시, background-color를 눈에 띄는 색상으로 설정한뒤 구역이 어디까지인지 눈으로 보며 연습하자.
✔️ 예쁜 CSS를 모아놓은 부트스트랩(Bootstrap)을 활용하면 더 빠르게 잘 만들 수 있다.

✅ 자바 강의 듣기

Random 함수를 다시 한 번 복습하기 위해 문제를 통해 풀어보았다. 흔한 로또 번호 생성기 문제이다. 조건은 다음과 같다.

  • 로또 번호를 자동으로 만들어주는 자동 생성기를 만들자
  • 로또 번호는 1~45 사이의 숫자를 6개 뽑아야 한다.
  • 각 숫자는 중복되면 안된다.
  • 실행할 때 마다 결과가 달라야 한다.

random.nextInt()를 통해 난수를 구해 로또 배열에 넣는 generate() 메서드와 각 숫자가 중복되는지 판별하는 isUnique() 메서드를 가진 LottoGenerator 클래스를 작성했다.

public class LottoGenerator {
    private final Random random = new Random();
    private int[] lottoNumbers;
    private int count;

    public int[] generate() {
        lottoNumbers = new int[6];
        count = 0;

        while (count < 6) {
            int number = random.nextInt(45) + 1;
            if (isUnique(number)) {
                lottoNumbers[count] = number;
                count++;
            }
        }
        return lottoNumbers;
    }

    private boolean isUnique(int number) {
        for (int i = 0; i < count; i++) {
            if (lottoNumbers[i] == number) return false;
        }
        return true;
    }
}

 

다음과 같이 main에서 중복되지 않는 6개의 로또 번호를 랜덤으로 구할 수 있다.

public class LottoGeneratorMain {
    public static void main(String[] args) {
        LottoGenerator generator = new LottoGenerator();
        int[] lottoNumbers = generator.generate();

        System.out.print("로또 번호: ");
        for (int lotto : lottoNumbers) {
            System.out.print(lotto + " ");
        };
    }
}
저작자표시 비영리 변경금지

'TIL' 카테고리의 다른 글

[TIL] 241212 - Firestore 사용 / 깃허브로 배포하기 / Java  (3) 2024.12.12
[TIL] 241206 - Javascript, JQuery / Java 공부  (5) 2024.12.06
[TIL] 241129 - SQL / Java 공부  (2) 2024.11.29
[TIL] 241127 - SQL / Java 공부  (2) 2024.11.27
[TIL] 241125 - SQL 공부 / 코테 풀이  (0) 2024.11.25
'TIL' Related Articles more