ADsP
모의고사를 푸는것으로 계속 나아가는것이 중요하다
내일 배움 캠프
미니프로젝트를 조원들과 하기로 하였는데...제비뽑기로 팀장이 되어버렸다...
팀원 구성과 자기 소개페이지를 만들어야하는데
우선은 자신의 각자 소개 페이지를 만들어 보기로 하였다.
우리가 배운 웹개발 A to Z 를 이용하여 만들기로 하여서 한번 해볼 생각이다.
자기소개 웹페이지 만들기!
조원들과 의논을 한 결과
조원중의 한분의 프레임 코드를 쓰기로 하였다..
내가 만든것은 저 멀리 저편으로
그래서 간단하게 적혀있는 프레임 코드에
네비게이션 바가 필요하다고 하여서 만들기로 하였다.
네비게이터 만들기!
<nav calss="navigator"></nav>
<h3 class="webname">HTML5</h3>
<ul>
<li><a class="nav-menu" href="#">팀페이지</a></li>
<li><a class="nav-menu" href="#">조원1</a></li>
<li><a class="nav-menu" href="#">조원2</a></li>
<li><a class="nav-menu" href="#">조원3</a></li>
<li><a class="nav-menu" href="#">조원4</a></li>
</ul>위 처럼 만들고
css
.navigator{
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.nav-menu {
text-decoration: none;
color:black;
}
li{
display: inline;
align-self: center;
margin: 0;
margin-left: 30px;
font-size: 20px;
}
ul{
margin: 0;
}
.web-name{
margin: 0;
font-size: 30px;
color:black;
}
.logo {
height: 40px;
margin-right: 10px;
}이런식으로 줬다......오타대마왕...오타 쳐서 왜 안바뀌는거야!!!만 반복...
토글로 조원들 작성할수있는 곳 만들기
<div class="toggle-section">
<button class="toggle-button" onclick="toggleContent('member1')">조원1</button>
<div class="toggle-content" id="member1">
<img src="member1-image.jpg" alt="조원1의 이미지">
<p>조원1의 소개</p>
</div>이런식으로 만든뒤
JS
function toggleContent(id) {
const content = document.getElementById(id);
if(content.style.display === 'none' || content.style.display === '') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
}
css
.toggle-section {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.toggle-button {
padding: 10px;
background-color: #eee;
border: none;
cursor: pointer;
}
.toggle-content {
display: none;
}
.toggle-content img {
max-width: 100px;
height: auto;
margin-right: 10px;
}
이런식으로 만들었더니....
중앙으로를 까먹었다...
이렇게 메인페이지를
만들고 있는중에
회의를 한 결과
내가 메인페이지를 담당하는 느낌으로 가고 개인 페이지들을 맡아 주기로 하며 의견조율을 하고 첨삭을 예정했다.
웹실행시 아이콘 표시하기!!!
우리 조는 5조이기 때문에 이름을 HTML5로 지었다...허허
<link rel="icon" href="scr/icons/logo.png" type="image/x-icon">해줘서 아이콘을 즐겨찾기해주고 링크를 걸어주면!!!
쫘좌좐
여기서 그치치않고 nav바에 앞에도 아이콘을 넣어주기 위해!!!
<img src="scr/icons/logo.png" alt="Website Icon" class="web-icon">해주면!!!!!
....? 너희 왜케 머니....?
가까이 와보지 않겠니...?
해주면 완료!!!!
회고
팀프로젝트란 무엇인가...누굴위한것인가
잘 모르겠지만 함께하는것을 배워나가는 중이라고 생각이 된다.
제대로 해보자고!!!!!!!!!
아 그러고보니 벨로그....html로도 작성이 되더라구?누가 이런 변태를 만든거야
Algorithm
문제 1. 대문자와 소문자
문제 설명
문자열 my_string이 매개변수로 주어질 때, 대문자는 소문자로 소문자는 대문자로 변환한 문자열을 return하도록 solution 함수를 완성해주세요.
제한사항
1 ≤ my_string의 길이 ≤ 1,000
my_string은 영어 대문자와 소문자로만 구성되어 있습니다.
class Solution {
public String solution(String my_string) {
StringBuilder answer = new StringBuilder(); // 문자열을 다루기 위해 StringBuilder 사용
for (char ch : my_string.toCharArray()) { // 문자열의 각 문자에 대해
if (Character.isLowerCase(ch)) { // 만약 해당 문자가 소문자라면
answer.append(Character.toUpperCase(ch)); // 대문자로 변환하여 추가
} else { // 그렇지 않다면(대문자라면)
answer.append(Character.toLowerCase(ch)); // 소문자로 변환하여 추가
}
}
return answer.toString(); // StringBuilder를 문자열로 변환하여 반환
}
}
문제 2.인덱스 바꾸기
문제 설명
문자열 my_string과 정수 num1, num2가 매개변수로 주어질 때, my_string에서 인덱스 num1과 인덱스 num2에 해당하는 문자를 바꾼 문자열을 return 하도록 solution 함수를 완성해보세요.
제한사항
1 < my_string의 길이 < 100
0 ≤ num1, num2 < my_string의 길이
my_string은 소문자로 이루어져 있습니다.
num1 ≠ num2
class Solution {
public String solution(String my_string, int num1, int num2) {
char[] chars = my_string.toCharArray(); // 문자열을 문자 배열로 변환
// num1과 num2 인덱스의 문자를 교환
char temp = chars[num1];
chars[num1] = chars[num2];
chars[num2] = temp;
return new String(chars); // 문자 배열을 문자열로 변환하여 반환
}
}
회고
알고리즘은 어느날은 쉬웠다가~어느날은 어려웠다가~~
이랬다 저랬다 하지만 그래도 꾸준히 함에 중요함을 느낀다.
